默认情况下,vue-cli 3.0生成的项目,隐藏了webpack配置项,如果我们需要配置webpack
需要通过vue.config.js
来配置。
在项目根目录中创建vue.config.js
文件
把 main.js
文件重命名为 main-prod.js
设置为发布模式的入口文件;
复制相同一份 main.js
重命名为 main-dev.js
设置为开发模式的入口文件
module.exports = {
chainWebpack: config => {
// 发布模式
config.when(process.env.NODE_ENV === 'production', config => {
// entry找到默认的打包入口,调用clear则是删除默认的打包入口
// add添加新的打包入口
config.entry('app').clear().add('./src/main-prod.js')
})
// 开发模式
config.when(process.env.NODE_ENV === 'development', config => {
config.entry('app').clear().add('./src/main-dev.js')
})
}
}
默认情况下,依赖项的所有第三方包都会被打包到js/chunk-vendors.**.js文件中,导致该js文件过大
那么我们可以通过externals排除这些包,使它们不被打包到js/chunk-vendors.******.js文件中
module.exports = {
chainWebpack: config => {
// 发布模式
config.when(process.env.NODE_ENV === 'production', config => {
// entry找到默认的打包入口,调用clear则是删除默认的打包入口
// add添加新的打包入口
config.entry('app').clear().add('./src/main-prod.js')
//使用externals设置排除项(发布模式)
config.set('externals',{
vue:'Vue',
'vue-router':'VueRouter',
axios:'axios',
echarts:'echarts'
})
// 使用htmlWebpackPlugin插件 以isProd字段判断是否是发布模式 是 返回true
config.plugin('html').tap(args => {
// 添加参数isProd
args[0].isProd = true
return args
})
})
// 开发模式
config.when(process.env.NODE_ENV === 'development', config => {
config.entry('app').clear().add('./src/main-dev.js')
// 使用插件 开发模式 isProd 返回false
config.plugin('html').tap(args => {
// 添加参数isProd
args[0].isProd = false
return args
})
})
}
}
设置好排除之后,为了使我们可以使用vue,axios等内容,我们需要加载外部CDN的形式解决引入依赖项。
打开开发入口文件main-prod.js,删除掉默认的引入代码
import Vue from 'vue'
import router from './router'
import App from './App.vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
import './assets/fonts/iconfont.css'
import './assets/css/global.css'
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' // http://timemeetyou.com:8889/api/private/v1/
// 通过axios 请求拦截器 添加token 需要授权的 API ,必须在请求头中使用 `Authorization` 字段提供 `token` 令牌
axios.interceptors.request.use(config => {
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在最后必须return config
return config
})
// axios 响应拦截器
axios.interceptors.response.use(function (res) {
return res.data
}, function (err) {
console.log(err)
})
Vue.prototype.$http = axios
// Vue.use(ElementUI) // 通过cdn 加载
// Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
<!-- pulic/index.html -->
<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.isProd ? '' : 'dev - ' %>后台管理系统</title>
<!-- 发布模式下 加载cdn链接 开发模式下不加载 -->
<% if(htmlWebpackPlugin.options.isProd){ %>
<!-- element-ui 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.2/theme-chalk/index.css" />
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.20.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.9.0/echarts.min.js"></script>
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.13.2/index.js"></script>
<% } %>
</head>