电商后台管理系统——首页内容定制

一 点睛

不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制。

二 定制过程

1 修改vue.config.js,配置如下

module.exports = {
    chainWebpack: config => {
        // 发布模式
        config.when(process.env.NODE_ENV === 'production', config => {
            config.entry('app').clear().add('./src/main-prod.js')
            config.set('externals', {
                // 如果在打包期间，发现import的一个包名为vue，就不会把这个包合并到文件中
                // 而是去window全局查找 Vue 对象，并直接使用
                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
            })
        })
    }
}

2 修改public/index.html，根据isProd的值，来决定如何渲染页面结构：

  
    
    
    
    
    
    

    
    <% if(htmlWebpackPlugin.options.isProd){ %>
    
    
    
    
    
    
    
    
    


    

    
    
    
    
    
    
    
    
    
    <% } %>
  
  
    
    

    
  

三 效果

1 开发模式测试效果

2 生产环境测试效果