开发环境的首页和发布环境的首页展示内容的形式有所不同 如开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现
我们可以通过插件的方式来定制首页内容，打开vue.config.js，编写代码如下：
module.exports = { chainWebpack:config=>{ // 开发阶段 config.when(process.env.NODE_ENV === 'production',config=>{ //...... 其他内容 //使用插件 config.plugin('html').tap(args=>{ //添加参数isProd 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 }) }) } }然后在public/index.html中使用插件判断是否为发布环境并定制首页内容
<!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> <% if(htmlWebpackPlugin.options.isProd){ %> <!-- nprogress 的样式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /> ........ <!-- element-ui 的 js 文件 --> <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script> <% } %> </head>