前端学习（2741）：重读vue电商网站51之首页内容定制

 

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

Javascript

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

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

Javascript

<!–- 按需渲染页面的标题 -->
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
<!–- 按需加载外部的 CDN 资源 -->
<% if(htmlWebpackPlugin.options.isProd) { %>
<!—- 通过 externals 加载的外部 CDN 资源-->
<% } %>