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

最新推荐文章于 2023-11-19 01:13:09 发布

chengqiuming

最新推荐文章于 2023-11-19 01:13:09 发布

阅读量603

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/chengqiuming/article/details/108607637

版权

Vue 专栏收录该内容

161 篇文章 16 订阅

订阅专栏

一点睛

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

二定制过程

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的值，来决定如何渲染页面结构：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 定制首页标题 -->
    <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.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
    <!-- 链接也可以在官方文档获取 -->
    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />


    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<!--    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>-->
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.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.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
    <% } %>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

三效果

1 开发模式测试效果

2 生产环境测试效果

chengqiuming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
电商后台管理系统——首页内容定制

一点睛不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制。二定制过程1修改vue.config.js,配置如下module.exports = { chainWebpack: config => { // 发布模式 config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clea...
复制链接

扫一扫