E-commerce management system example of Vue + ElementUI 26 Project optimization-home page content customization

Project optimization strategy

7. Customize homepage content

In different packaging environments, the content of the home page may be different. We can use the plug-in method for timing. The plug-in configuration is as follows:

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
    })
  })
}

In the public / index.html home page, you can decide how to render the page structure based on the value of isProd:

<!- Render the title of the page on demand- >
 < title > <% = htmlWebpackPlugin.options.isProd? ' ': 'Dev-' %> e-commerce background management system </ title > ;

< ! - demand loading external CDN resources -> 
< % IF (htmlWebpackPlugin.options.isProd) { %> 
<-! External CDN resources externals loaded -> 
<% } %>

Open vue.config.js to add code:

module.exports = {
  chainWebpack: config => {
     // Release mode--Package entry at the release stage 
    config.when (process.env.NODE_ENV === 'production', config => {
      config.entry ( 'app'). clear (). add ('./ src / main-prod.js' )
       // externals load external CDN resource 
      config.set ('externals' , {
        view: 'View' ,
         'view-router': 'VueRouter' ,
        axios: 'axios' ,
        lodash: '_' ,
        echarts: 'echarts' ,
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
      // Home page customization 
      config.plugin ('html'). Tap (args => {
        args[0].isProd = true
        return args
      })
    })
    // Development mode--package entry at the development stage 
    config.when (process.env.NODE_ENV === 'development', config => {
      config.entry ( 'app'). clear (). add ('./ src / main-dev.js' )
       // Home page customization 
      config.plugin ('html'). tap (args => {
        args[0].isProd = false
        return args
      })
    })
  }
}

Open the index.html file:

< Title > <% = htmlWebpackPlugin.options.isProd? ' ': 'Dev -'%> electricity supplier back-end management system </ title> 
< ! - demand loading of CDN external resources -> 
< % IF (htmlWebpackPlugin. options.isProd) { %> 
      <!- nprogress style sheet file- > 
      < link rel = "stylesheet" href = "https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css "  /> 
      <!- Style sheet file of rich text editor- > 
      < 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>
<% } %>

Open the visual UI panel, stop in serve first, and then re-run. At this point, the project can run normally, and the problem of redefining the previous route is solved.

 

You can also see the dev-e-commerce background management system on the title, and then right-click to view the source code and find that no external CDN resources are referenced.

Then in the build, click run. After successful editing, open the index.html file in the dist folder, you can find the title and the reference to load external CDN resources.