Vue项目优化&&项目上线

目录

项目优化

1.生成打包报告

2.通过vue.config.js修改webpack的默认配置

 3.为开发模式与发布模式指定不同的打包入口​

4. configureWebpack和chainWebpack​

5.通过chainWebpack自定义打包入口

 6.通过externals加载外部CDN资源

 7.通过CDN优化ElementUI的打包

8.首页内容定制

9.路由懒加载

项目上线

1. 通过 node 创建 web 服务器

2. 开启 gzip 配置

3. 配置 https 服务

4. 使用 pm2 管理应用

---

项目优化

1.生成打包报告

打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：

（1）通过命令行参数的形式生成报告

（2）通过可视化的UI面板直接查看报告（推荐）

 在可视化的UI面板中，通过控制台和分析面板，可以方便地看到项目中所存在的问题

打开可视化UI面板，点击“任务”=>“build”=》“运行”

运行之后就会将项目打包，还会生成一些对应的报告信息，在控制台和分析面板中可以看到项目中存在的问题

2.通过vue.config.js修改webpack的默认配置

通过vue-cli 3.0工具生成的项目，默认隐藏了所有webpack的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心，放到具体功能和业务逻辑的实现上。

 3.为开发模式与发布模式指定不同的打包入口

4. configureWebpack和chainWebpack

 两者具体的使用差异，可参考如下网址：

https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3

5.通过chainWebpack自定义打包入口

这些都是要写到vue.config.js里面去的

 将main.js重命名为main-dev.js再将代码复制一份到main-prod.js

在vue.config.js中，定义发布时的打包入口和开发时的打包入口，将下面的代码写入vue.config.js中

 6.通过externals加载外部CDN资源

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。

为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在externals 中的第三方依赖包，都不会被打包。

在vue.config.js中添加下面代码

 

 将main-prod.js中的导入富文本编辑器和nprogress的样式表文件删除，在public/index.html头部中添加下面代码

<!-- 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" />



<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-qui