多页模式官方配置说明 https://cli.vuejs.org/zh/config/#pages
const isProd = process.env.NODE_ENV === 'production'
const isDev = process.env.NODE_ENV === 'development'
const cdnResource = {
dev: {
css: [
'https://cdn.jsdelivr.net/npm/element-ui@2.10.1/lib/theme-chalk/index.css'
],
js: []
},
build: {
css: [
'https://cdn.jsdelivr.net/npm/element-ui@2.10.1/lib/theme-chalk/index.css'
],
js: [
'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.runtime.min.js',
'https://cdn.jsdelivr.net/npm/vue-router@3.0.3/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/axios@0.18.1/dist/axios.min.js',
'https://cdn.jsdelivr.net/npm/element-ui@2.10.1/lib/index.js'
]
}
}
module.exports = {
productionSourceMap: false,
devServer: {
host: '0.0.0.0',
port: 8888
},
assetsDir: 'assets',
pages: {
index: {
entry: 'src/pages/index/main.js',
template: 'public/index.html',
filename: 'index.html',
title: '页面1',
},
assist: {
entry: 'src/pages/assist/assist.js',
template: 'public/index.html',
filename: 'assist.html',
title: '页面2',
}
},
chainWebpack: config => {
// 单页面入口这样写：
// config.plugins.delete('prefetch')
// config.plugin('html')
// ...
// 多页模式这样写：
// 删除懒加载模块的prefetch，降低带宽压力
config.plugins.delete('prefetch-index')
config.plugins.delete('prefetch-assist')
// 添加CDN参数到htmlWebpackPlugin配置中
config.plugin('html-index').tap(args => {
if (isProd) {
args[0].cdn = cdnResource.build
}
if (isDev) {
args[0].cdn = cdnResource.dev
}
return args
})
config.plugin('html-assist').tap(args => {
if (isProd) {
args[0].cdn = cdnResource.build
}
if (isDev) {
args[0].cdn = cdnResource.dev
}
return args
})
},
configureWebpack: config => {
// 开发环境不用cdn，用本地node_modules的资源
if (isProd) {
config.externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'element-ui': 'ELEMENT'
}
}
}
}
对应的入口html文件改动如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but it doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>
有朋自远方来...评论一下呗O(∩_∩)O