Vue项目优化

最新推荐文章于 2023-11-12 11:48:10 发布

weixin_50027754

最新推荐文章于 2023-11-12 11:48:10 发布

阅读量74

点赞数

分类专栏：教程笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_50027754/article/details/110949568

版权

教程同时被 2 个专栏收录

111 篇文章 0 订阅

订阅专栏

笔记

110 篇文章 0 订阅

订阅专栏

首页内容定制

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

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

}

2.在public/index.html首页中，可以根据isProd的值，来决定如何渲染页面结构：

<!-- 按需渲染页面的标题 -->
<title><%=htmlWebpackPlugin.options.isProd ?  '': 'dev - '%>fish物流</title>
<!-- 按需加载外部的CDN资源 -->
<% if(htmlWebpackPlugin.options.isProd){%>
  <!-- 通过externala加载的外部CDN资源 -->
<%} %>