打包时，为了直观地发现项目中存在的问题，能够在打包时生成报告。生成报告的方式有两种：javascript
① 经过命令行参数的形式生成报告css
// 经过 vue-cli 的命令选项能够生成打包报告
//--report选项能够生成report.html以帮助分析包内容
vue-cli-service build--reporthtml
② 经过可视化的UI面板直接查看报告（推荐）vue
在可视化的UI面板中，经过控制台和分析面板，能够方便地看到项目中所存在的问题。java
经过 vue-cli 3.0 工具生成的项目，默认隐藏了全部 webpack 的配置项，目的是为了屏蔽项目的配置过程，让程序员把工做的重心，放到具体功能和业务逻辑的实现上。node
若是程序员有修改 webpack 默认配置的需求，能够在项目根目录中，按需建立vue.config.js 这个配置文件，从而对项目的打包发布过程作自定义的配置（具体配置参考 https://cli.vuejs.org/zh/config/#vue-config-js）。webpack
// vue.config.js
// 这个文件中，应该导出一个包含了自定义配置选项的对象
module.exports = {
// 选项...
}
12345
默认状况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即 src/main.js）。为了将项目的开发过程与发布过程分离，咱们能够为两种模式，各自指定打包的入口文件，即：
① 开发模式的入口文件为 src/main-dev.js
② 发布模式的入口文件为 src/main-prod.jsios
在 vue.config.js 导出的配置对象中，新增 configureWebpack 或 chainWebpack 节点，来自定义 webpack
的打包配置。程序员
在这里， configureWebpack 和 chainWebpack 的做用相同，惟一的区别就是它们修改 webpack 配置的方
式不一样：
① chainWebpack 经过链式编程的形式，来修改默认的 webpack 配置
② configureWebpack 经过操做对象的形式，来修改默认的 webpack 配置web
二者具体的使用差别，可参考以下网址：
https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3
代码示例以下：
module.exports = { chainWebpack: config => { config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clear().add('./src/main-prod.js') }) config.when(process.env.NODE_ENV === 'development', config => { config.entry('app').clear().add('./src/main-dev.js') }) } } 123456789
默认状况下，经过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而致使打包成功后，单文件体积过大的问题。
为了解决上述问题，能够经过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在
externals 中的第三方依赖包，都不会被打包。
具体配置代码以下：
config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor' }) 1234567
同时，须要在 public/index.html 文件的头部，添加以下的 CDN 资源引用：
<!-- nprogress 的样式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /> <!-- 富文本编辑器 的样式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" /> 123456
同时，须要在 public/index.html 文件的头部，添加以下的 CDN 资源引用：
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script> <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script> <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script> <!-- 富文本编辑器的 js 文件 --> <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script> 123456789
虽然在开发阶段，咱们启用了 element-ui 组件的按需加载，尽量的减小了打包的体积，可是那些被按需加载的组件，仍是占用了较大的文件体积。此时，咱们能够将 element-ui 中的组件，也经过 CDN 的形式来加载，这样可以进一步减少打包后的文件体积。
具体操做流程以下：
① 在 main-prod.js 中，注释掉 element-ui 按需加载的代码
② 在 index.html 的头部区域中，经过 CDN 加载 element-ui 的 js 和 css 样式
<!-- element-ui 的样式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/themechalk/index.css" /> <!-- element-ui 的 js 文件 --> <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script> 123
不一样的打包环境下，首页内容可能会有所不一样。咱们能够经过插件的方式进行定制，插件配置以下：
chainWebpack: config => { config.when(process.env.NODE_ENV === 'production', config => { config.plugin('html').tap(args => { args[0].isProd = true return args }) }) config.when(process.env.NODE_ENV === 'development', config => { config.plugin('html').tap(args => { args[0].isProd = false return args }) }) } 1234567891011121314
在 public/index.html 首页中，能够根据 isProd 的值，来决定如何渲染页面结构：
<!– 按需渲染页面的标题 --> <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title> <!– 按需加载外部的 CDN 资源 --> <% if(htmlWebpackPlugin.options.isProd) { %> <!—经过 externals 加载的外部 CDN 资源--> <% } %> 123456
当打包构建项目时，JavaScript 包会变得很是大，影响页面加载。若是咱们能把不一样路由对应的组件分割成不一样的代码块，而后当路由被访问的时候才加载对应组件，这样就更加高效了。
具体须要 3 步：
① 安装 @babel/plugin-syntax-dynamic-import 包。
② 在babel.config.js 配置文件中声明该插件。
③ 将路由改成按需加载的形式，示例代码以下：
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue') 123
关于路由懒加载的详细文档，可参考以下连接：
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
建立 node 项目，并安装 express，经过 express 快速建立 web 服务器，将 vue 打包生成的 dist 文件夹，
托管为静态资源便可，关键代码以下：
const express = require('express') // 建立 web 服务器 const app = express() // 托管静态资源 app.use(express.static('./dist')) // 启动 web 服务器 app.listen(80, () => { console.log('web server running at http://127.0.0.1') }) 123456789
使用 gzip能够减少文件体积，使传输速度更快
能够经过服务器端使用 Express 作 gzip 压缩。其配置以下：
// 安装相应包 npm install compression -S // 导入包 const compression = require('compression'); // 启用中间件 app.use(compression());
3. 配置 HTTPS 服务
为何要启用 HTTPS 服务？
传统的 HTTP 协议传输的数据都是明文，不安全
采用 HTTPS 协议对传输的数据进行了加密处理，能够防止数据被中间人窃取，使用更安全
3. 配置 HTTPS 服务
**申请 SSL 证书（https://freessl.org）**
① 进入 https://freessl.cn/ 官网，输入要申请的域名并选择品牌。
② 输入本身的邮箱并选择相关选项。
③ 验证 DNS（在域名管理后台添加 TXT 记录）。
④ 验证经过以后，下载 SSL 证书（ full_chain.pem 公钥；private.key 私钥）
3. 配置 HTTPS 服务
**在后台项目中导入证书**
const https = require('https'); const fs = require('fs'); const options = { cert: fs.readFileSync('./full_chain.pem'), key: fs.readFileSync('./private.key') } https.createServer(options, app).listen(443);
4. 使用 pm2 管理应用
① 在服务器中安装 pm2：npm i pm2 -g
② 启动项目：pm2 start 脚本 --name 自定义名称
③ 查看运行项目：pm2 ls
④ 重启项目：pm2 restart 自定义名称
⑤ 中止项目：pm2 stop 自定义名称
⑥ 删除项目：pm2 delete 自定义名称