项目优化策略
7、首页内容定制
不同的打包环境下,首页内容可能会有所不同,我们可以通过插件的方式进行定时,插件配置如下:
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 }) }) }
在 public/index.html 首页中,可以根据 isProd 的值,来决定如何渲染页面结构:
<!-- 按需渲染页面的标题 --> <title><%= htmlWebpackPlugin.options.isProd ? ' ' : 'dev - ' %>电商后台管理系统</title>; <!-- 按需加载外部的 CDN 资源--> <% if(htmlWebpackPlugin.options.isProd) { %> <!-- 通过 externals 加载的外部 CDN 资源--> <% } %>
打开vue.config.js添加代码:
module.exports = { chainWebpack: config => { // 发布模式--发布阶段的打包入口 config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clear().add('./src/main-prod.js') // externals 加载外部 CDN 资源 config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor' }) // 首页定制 config.plugin('html').tap(args => { args[0].isProd = true return args }) }) // 开发模式--开发阶段的打包入口 config.when(process.env.NODE_ENV === 'development', config => { config.entry('app').clear().add('./src/main-dev.js') // 首页定制 config.plugin('html').tap(args => { args[0].isProd = false return args }) }) } }
打开 index.html 文件:
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title> <!-- 按需加载外部的 CDN 资源--> <% if(htmlWebpackPlugin.options.isProd) { %> <!-- 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.6/quill.core.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.6/quill.snow.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.6/quill.bubble.min.css" /> <!-- element-ui 的样式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" /> <!-- element-ui 的js文件 --> <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script> <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script> <script src="https://cdn.staticfile.org/lodash.js/4.17.15/lodash.min.js"></script> <script src="https://cdn.staticfile.org/echarts/4.7.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.6/quill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script> <% } %>
打开可视化UI面板,在 serve 中先停止,然后重新运行,此时项目可以正常跑起来了,前面路由重定义的问题就解决了。
也可以看到 title 上的 dev - 电商后台管理系统,然后右键点击查看源码,发现并没有引用外部 CDN 资源。
然后在 build 中,点击运行。编辑成功后,打开 dist 文件夹的 index.html 文件,可以发现 title 和 引用的加载外部的 CDN 资源。