0.用vue ui可以查看项目打包后的情况。
1.定义包的排除
let externals = {
'axios': 'axios',
'element-ui': 'ELEMENT',
'echarts': 'echarts',
}
configureWebpack: {
externals: externals
}
2.配置cdn包资源
let cdn = {
css: [
'https://unpkg.com/element-ui/lib/theme-chalk/index.css',
],
js: [
'https://unpkg.com/vue/dist/vue.js',
'https://unpkg.com/element-ui/lib/index.js',
]
}
chainWebpack (config) {
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
}
3.在public文件夹下的html的head标签中插入cdn资源
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>" />
<% } %>
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
4.根据环境,配置是否使用cdn
const isProd = process.env.NODE_ENV === 'production'
...
cdn = isProd ? cdn : { css: [], js: [] }
externals = isProd ? externals : {}
5.运行npm run build打包即可。
注意：ui组件的css要在mian.js中注释掉(如import ‘element-ui/lib/theme-chalk/index.css’)，因为我们在externals并没有去定义排除。其他的能在externals定义的资源(如import ElementUI from ‘element-ui’;Vue.use(ElementUI)),都不需要改动，打包后也没有啥影响。还有ui组件我用的整体引入的方式,按需引入配置有点麻烦,就没去弄了。
6.完整代码：
const { defineConfig } = require('@vue/cli-service')
let externals = {
'vue': 'Vue',
'axios': 'axios',
'element-ui': 'ELEMENT',
'echarts': 'echarts',
}
let cdn = {
css: [
'https://unpkg.com/element-ui/lib/theme-chalk/index.css',
],
js: [
'https://unpkg.com/vue@2/dist/vue.js',
'https://unpkg.com/element-ui/lib/index.js',
'https://unpkg.com/axios/dist/axios.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js'
]
}
const isProd = process.env.NODE_ENV === 'production'
cdn = isProd ? cdn : { css: [], js: [] }
externals = isProd ? externals : {}
module.exports = defineConfig({
transpileDependencies: true,
publicPath:'./',
configureWebpack: {
externals: externals
},
chainWebpack(config) {
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
}
})
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.$axios = axios
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app')
<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.title %></title>
<!-- 如果不想这样写，也可以像下面这样直接引入资源 -->
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>" />
<% } %>
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
<!-- 如果想直接引入资源,就不需要上面这段,然后vue.config.js中的 args[0].cdn = cdn也不需要了 -->
<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
总结：
生产和开发唯一要改动的就是ui组件的css样式的引入（import ‘element-ui/lib/theme-chalk/index.css’），其他一律不需要改动。生产：注释掉样式的引入,开发去掉该注释。还有ui组件用了cdn的话，vue也要用cdn，如果vue不用cdn，打包后会出现引入顺序问题，导致报错。
