构建和发布

构建

当项目开发完毕，只需要运行一行命令就可以打包你的应用：

# 打包正式环境
npm run build:prod

# 打包预发布环境
npm run build:stage

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js 、***.css、index.html 等静态文件。

环境变量

所有测试环境或者正式环境变量的配置都在 .env.development 等 .env.xxxx文件中。

它们都会通过 webpack.DefinePlugin 插件注入到全局。

注意！！！

环境变量必须以VUE_APP_为开头。如:VUE_APP_API、VUE_APP_TITLE

你在代码中可以通过如下方式获取:

console.log(process.env.VUE_APP_xxxx)

分析构建文件体积

如果你的构建文件很大，你可以通过 webpack-bundle-analyzer 命令构建并分析依赖模块的体积分布，从而优化你的代码。

npm run preview -- --report

运行之后你就可以在 http://localhost:8085/report.html 页面看到具体的体积分布

具体的优化可以参考 Webpack 大法之 Code Splitting

提示

强烈建议开启 gzip ，使用之后普遍体积只有原先 1/3 左右。打出来的 app.js 过大，查看一下是不是 Uglify 配置不正确或者 sourceMap 没弄对。 优化相关请看该 Webpack Freestyle 之 Long Term Cache

发布

对于发布来讲，只需要将最终生成的静态文件，也就是通常情况下 dist 文件夹的静态文件发布到你的 cdn 或者静态服务器即可，需要注意的是其中的 index.html 通常会是你后台服务的入口页面，在确定了 js 和 css 的静态之后可能需要改变页面的引入路径。

# 一键自动发布到Linux服务器
npm run auto:deploy