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/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
<% } %>

打開可視化UI面板，在 serve 中先停止，然后重新運行，此時項目可以正常跑起來了，前面路由重定義的問題就解決了。

 

也可以看到 title 上的 dev - 電商后台管理系統，然后右鍵點擊查看源碼，發現並沒有引用外部 CDN 資源。

然后在 build 中，點擊運行。編輯成功后，打開 dist 文件夾的 index.html 文件，可以發現 title 和 引用的加載外部的 CDN 資源。