vue完成项目后,打包成静态文件的方法

vue完成项目后，如何打包成静态文件，并且用Node调试

打包

1、修改config里面的index.js里面的productionSourceMap为false,默认情况是true（true代表打包环境是开发环境，可以进行调试；false表示生产环境，正式上线的）

2.在cmd里面运行npm run build,(运行的是build里面的build.js文件)

生成的包放在dist下面

使用node进行调试

1、在根目录下创建prod.server.js文件，这个文件的作用是作为一个小的httpserver，在正常开发下，可以直接把dist里面的文件放到tomcat里面进行调试

prod.server.js代码

 /**
 * Created by Administrator on 2017/2/22.
 */
 var express = require('express')
 var config = require('./config/index')

 var port = process.env.PORT || config.build.port

 var app= express()

 var router = express.Router()

 router.get('/',function (req, res, next) {
 req.url = '/index.html'
 next()
 })

 app.use(router)

 //异步接口
var seller=require('./src/data/data.json')
var apiRoutes = express.Router()
apiRoutes.get('/seller',function (req,res) {
 res.json({
 data:seller
 })
})
app.use('/api', apiRoutes); //定义express静态目录 app.use(express.static('./dist')) var autoOpenBrowser = !!config.dev.autoOpenBrowser var uri = 'http://localhost:' + port var opn = require('opn') //启动express module.exports = app.listen(port, function (err) { if (err) { console.log(err) return } // when env is testing, don't need open it if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { opn(uri) } })

以上这篇vue完成项目后,打包成静态文件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue静态资源打包中的坑与解决方案

    本文主要解决 ①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题. 1.问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后,部署项目至特定路径下:如: //ip:port/public/springActivity/ 此时访问: http://ip:port/public/springActivity/index.html index.html 可以正常访问,但是引用

  • 解决vue项目打包后提示图片文件路径错误的问题

    vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build

  • 解决vue打包之后静态资源图片失效的问题

    1.问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到(404错误),这些图片可以是以src引入的图片, 也可以是css中定义的背景图片.图片能否显示与你的静态资源文件存在位置和引入的路径直接相关,下面是我的其中一个项目的文件存放以及路径书写方式! 2.解决方法之一 静态资源static存放位置放在src目录下 你可能会问为什么放在src目录下?放在跟src同级目录下不可以吗?好吧,一开始我也是放在src同

  • vue完成项目后,打包成静态文件的方法

    vue完成项目后,如何打包成静态文件,并且用Node调试 打包 1.修改config里面的index.js里面的productionSourceMap为false,默认情况是true(true代表打包环境是开发环境,可以进行调试:false表示生产环境,正式上线的) 2.在cmd里面运行npm run build,(运行的是build里面的build.js文件) 生成的包放在dist下面 使用node进行调试 1.在根目录下创建prod.server.js文件,这个文件的作用是作为一个小的htt

  • 详解如何使用Docker部署一个web项目并打包成镜像文件

    docker基本入门以后,可以试试打包docker镜像与dockerfile了 docker镜像 docker hub仓库有2类仓库,用户仓库和顶层仓库,用户仓库由docker用户创建的,顶层仓库由docker内部的人来管理的.仓库里存放的是镜像文件,那么问题来了 ,怎么去创建镜像呢? how to create image 构建docker镜像的有2种方法: 1.使用docker commit命令. 2.使用docker build 命令和Dockerfile文件.在这里并不推荐使用docke

  • Vue webpack 项目自动打包压缩成zip文件的方法

    这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能就要打包好多次,这就很烦了.所以索性在执行 npm run build 命令时就直接打包成zip文件,方便省事! 1.插件装备 webpack插件:filemanager-webpack-plugin,该插件可执行打包,复制,移动,删除文件以及新文件夹在build之前及之后创建. 安装: npm i

  • Vue 打包的静态文件不能直接运行的原因及解决办法

    问题 吾辈使用 vue-cli 直接生成的 vue 模板项目,在模板之上继续开发的.然而在使用 npm run build 打包项目时,却发现打包好的项目在浏览器中直接打开好像什么都没有? 原因 查看了一下打包后的 index.html 源码,终于发现了一个重要的点: 所有涉及到路径的地方全都是以 / 开头的 下面是吾辈打包后生成的 dist 目录 dist:. │ index.html │ └─static ├─css │ app.b7bce283257fbd427fb1dc3fea80cee

  • 详解eclipse将项目打包成jar文件的两种方法及问题解决方法

    第一种:利用eclipse中自带的export功能 第一种方法分两种情况先来看第一种情况:没有引用外部jar的项目打包 步骤一:右键点击项目选择导出(export),选择java>jar文件(不是选择可运行jar文件) 步骤二:选择你要导出的项目以及文件,指定文件导出路径.连续点击两个下一步后到第四步. 步骤三:选择主类. 按照以上步骤即可完成对一个不引用外部jar项目的打包. 第二种情况:没有引用外部jar的项目打包 当我们引用了外部jar后,使用eclipse自带的export打包略显繁琐.

  • Python项目打包成exe文件

    Python项目打包成exe文件

    目录 前言 环境依赖 项目打包 总结 前言 之前有人私信我,他写了一个在终端交互的小程序,希望可以不在IDE的终端显示,而是独立一个窗口进行交互.其实只要把项目打包成exe执行文件,就可以在执行的时候在cmd独立一个窗口了. 如果python项目打包exe呢?下面按照步骤讲解一下. 环境依赖 安装pyinstaller. pip install pyinstaller -i https://pypi.douban.com/simple 项目打包 项目部分代码 先看一下项目在终端执行的效果. 使用

  • Vue项目中打包优化的四种方法详解

    目录 前言 打包优化的目的: 性能优化的主要方向: 1.异步组件配置(路由懒加载) 2.去掉打包后的 console 3.使用CDN 4.yarn build生成dist目录 总结 前言 默认情况下,通过import语法导入的第三方依赖包,最终会全部打包到一个js文件中,会导致单文件体积过大大,在网速底下时会阻塞网页加载,影响用户体验. 打包优化的目的: 1.项目启动速度,和性能 2.必要的清理数据 3.减少打包后的体积 第一点是核心,第二点呢其实主要是清理console 性能优化的主要方向:

  • node-webkit打包成exe文件被360误报木马的解决方法

    node-webkit打包成exe文件被360误报木马的解决方法

    最近项目需要用到node-webkit.处理古老级用户的兼容以及他们心里的'数据安全'问题. 1.下载完node-webkit 2.制作appName.nw文件 3.copy /b nw.exe+appName.nw  TestAppName.exe 到目前为止,目录下生成了TestAppName.exe文件 ,双击运行很完美. 但,直接将TestAppName.exe换个目录,却打不开. google+百度的解决方案:使用Enigma Virtual Box工具,打包成exe文件.(Enigm

  • AndroidStudio项目打包成jar的简单方法

    AndroidStudio项目打包成jar的简单方法

    首先备注一下 JAR(Java Archive,Java 归档文件)是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件.为 J2EE 应用程序创建的 JAR 文件是 EAR 文件(企业 JAR 文件). 什么是AAR,与JAR区别 *.jar:只包含了class文件与清单文件,不包含资源文件,如图片等所有res中的文件. *.aar:包含所有资源,class以及res资源文件全部包含 Android Studio 如何打JAR包 在eclipse中我们知道如何将一个项目导出为jar包,供

  • 史上最详细的Python打包成exe文件教程

    史上最详细的Python打包成exe文件教程

    打包成exe文件可以让python代码在没有python环境的条件下,依然能够运行,实在是码农们写追女朋友表白.情人节浪漫的必需品! 1.使用豆瓣镜像源下载: pyinstaller 有需要了解如何使用国内镜像的小伙伴可以滴滴到此: 国内镜像源详细使用教程! https://blog.csdn.net/xtreallydance/article/details/112596963 在python终端或者cmd中输入此命令: pip install pyinstaller -i https://p

随机推荐