Scaffolding version: @vue/cli 4.4.1
vue.config.js
module.exports = {
//打包是否生成.map文件
productionSourceMap: false,
lintOnSave: false,
configureWebpack: {
externals: {
'element-ui': 'ELEMENT',
'vue': 'Vue',
"vue-router": "VueRouter",
'vuex': "Vuex",
axios: 'axios'
}
},
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index'],
cdn: {
css: [
'https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css'
],
js: [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js",
"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js",
"https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js",
"https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js",
"https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"
]
},
}
},
devServer: {
port: 8013
}
};
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<% for (let i in htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>
</head>
<body>
<div id="app"> </div>
<% for (let i in htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>
Do you want to comment out the introduction
For example: import Vue from'vue', I read some blogs and said that I want to comment out, but I tested the commented out and uncommented, the file size is the same at the packaging place, it should be 4版本the scaffolding.
Supplement
The names of ELEMENT and VueRouter can be viewed in the global objects exposed by the source code.
About cdn address
The unpkg server is in the United States, and jsdelivr is faster in China (the interesting thing is that jsdelivr is used in the vue document, and unpkg is used in element-ui. The black toothpaste is a Chinese brand, and the Chinese toothpaste is a foreign brand. The same principle?)
