Vue + ElementUI的电商管理系统实例26 项目优化-首页内容定制

项目优化策略

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/[email protected]/dist/vue-quill-editor.js"></script>
<% } %>

打开可视化UI面板，在 serve 中先停止，然后重新运行，此时项目可以正常跑起来了，前面路由重定义的问题就解决了。

 

也可以看到 title 上的 dev - 电商后台管理系统，然后右键点击查看源码，发现并没有引用外部 CDN 资源。

然后在 build 中，点击运行。编辑成功后，打开 dist 文件夹的 index.html 文件，可以发现 title 和 引用的加载外部的 CDN 资源。