在使用vue-cli3创建项目后，自动帮你做了很多的配置，包括原本的vue.config.js配置文件也没有帮你生成，而我的一些关于项目的配置和自定义webpack打包都需要写在这个配置文件中。
以下说开发模式/环境 (development) 就是指 npm run serve
生产模式/环境 (production) 就是指 npm run build
我们在项目根路径下（与package.json同级）创建一个 vue.config.js 文件，写入下面这些：
// vue-cli3的配置文件 vue.config.js
// cdn预加载的模块
const externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios',
'js-cookie': 'Cookies',
'vuex': "Vuex"
}
// cdn预加载的模块的地址
const cdn = {
js: [
'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js',
'https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js',
'https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js',
'https://cdn.bootcdn.net/ajax/libs/js-cookie/2.2.1/js.cookie.min.js',
'https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js'
]
}
module.exports = {
publicPath: './', // vue3解决部署到服务器白屏问题 '/' => ''
outputDir:'dist', // 打包目录
devServer: {
host: "127.0.0.1", // 开发模式时的ip
port: 8090, // 开发模式时的端口
},
chainWebpack: config => {
// npm run prod (发布模式)
config.when(process.env.NODE_ENV === 'production', config => {
config
.entry('app')
.clear()
.add('./src/main-prod.js')
// 通过externals加载外部CDN资源----1
config.set('externals', externals)
// 发布模式的isProd为true
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
})
// npm run dev (开发模式)
config.when(process.env.NODE_ENV === 'development', config => {
config
.entry('app')
.clear()
.add('./src/main.js')
})
}
};
本项目以默认使用了 vue、vue-router、vuex、axios和js-cookie为例，将需要以cdn形式加载的模块(externals)及其地址(cdn)先声明出来，其中的很多配置后已经给出了注释，其中chainWebpack就是我们的链式webpack打包，如果我们不配置webpack的话，vue-cli的默认webpack打包会将我们所有安装的生产环境依赖一起编译到chunk.js中，体积比较大。
而对于我们使用自定义webpack打包，可以使这些依赖不被打包，而是在打开网页时在线加载，极大的减小了打包后的体积。
npm run serve --> process.env.NODE_ENV === 'production'
npm run build --> process.env.NODE_ENV === 'development'
所以根据上面的配置，开发模式下不使用cdn加载依赖。
其中main.js和main-prod.js大多数情况下内容是一样的，一般来说你可以根据自己的需求来更改开发和生产模式使用的入口js文件：
// mian.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
我们既然在开发模式中使用了预加载，就要将cdn连接link到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.title %></title>
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
其中页面的title引入的是package.json中的nam。还有就是cdn加载速度一般快于unpkg。下面是打包后运行的结果：
并不是所有的依赖都必须以cdn加载，一般来说体积较大的依赖以cdn方式加载。还有需要保证cdn地址可以长期稳定访问，这里提供一个cdn地址：https://www.bootcdn.cn/
1601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
