-
Notifications
You must be signed in to change notification settings - Fork 1
/
vue.config.js
95 lines (93 loc) · 3.59 KB
/
vue.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
const { defineConfig } = require('@vue/cli-service')
// 需要排除的包对象
let externals = {}
let CDN = { css: [], js: [] }
// 判断是否是生产环境
const isProduction = process.env.NODE_ENV === 'production'
// 如何是生产环境,需要执行以下逻辑
if (isProduction === true) {
// eslint-disable-next-line no-unused-expressions
externals = {
/**
* externals 对象属性解析:
* '包名': '在项目中引入的名字'
* 以 element-ui 举例 我再 main.js 里是以
* import ELEMENT from 'element-ui'
* Vue.use(ELEMENT)
* 这样引入的,所以我的 externals 的属性值应该是 ELEMENT
* 一定要去main.js设置
*/
echarts: 'echarts',
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
dayjs: 'dayjs',
'element-ui': 'ELEMENT',
'vue-quill-editor': 'VueQuillEditor',
'vuex-persistedstate': 'createPersistedState'
}
CDN = {
css: ['https://unpkg.com/[email protected]/lib/theme-chalk/index.css',
'https://unpkg.com/[email protected]/dist/quill.core.css',
'https://unpkg.com/[email protected]/dist/quill.snow.css',
'https://unpkg.com/[email protected]/dist/quill.bubble.css'],
js: [
'https://unpkg.com/[email protected]/dist/echarts.min.js',
'https://unpkg.com/[email protected]/dist/vue.js',
'https://unpkg.com/[email protected]/dist/vue-router.js',
'https://unpkg.com/[email protected]/dist/vuex.js',
'https://unpkg.com/[email protected]/dist/axios.min.js',
'https://unpkg.com/[email protected]/dayjs.min.js',
'https://unpkg.com/[email protected]/lib/index.js',
'https://unpkg.com/[email protected]/dist/quill.js',
'https://unpkg.com/[email protected]/dist/vue-quill-editor.js',
'https://unpkg.com/[email protected]/dist/vuex-persistedstate.umd.js'
]
}
}
module.exports = defineConfig({
transpileDependencies: true,
// 影响打包时,index.html引入其他资源的前缀地址
// ./可以让开发环境和生产环境都可以正常使用
// 为了严谨一些
// 开发环境:'/'
// 生产环境:'./'
// 问题:有无代码可以让他自己识别当前运行环境?
// node里有个内置的环境变量process.env.NODE_ENV
// process.env.NODE_ENV它会根据你敲击的命令,来使用不同的值
// 解决:
// 如果你敲击yarn server,process.env.NODE_ENV的值就是'development'字符串
// 如果你敲击yarn build , process.env.NODE_ENV的值就是'production'字符串
publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // 这句话是下面总结一要加的,其他比初始多的代码是总结二
assetsDir: 'static',
outputDir: 'dist',
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
// name: name,
externals: externals
// resolve: {
// alias: {
// '@': resolve('src')
// }
// }
},
chainWebpack (config) {
config.plugin('html').tap(args => {
args[0].cdn = CDN
return args
})
}
})
// 总结:
// 1. publicPath:影响的是打包(webpack开发服务器/dist)的时候index.html引入其他资源的前缀地址
// 情况1:开发环境,值:'/'
// 情况2:生产环境,值:'./'(才能确保dist/index.html相对路径下访问)
// 2. dist瘦身:影响dist的体积,其他第三方包用cdn地址引入到index.html中保证运行
// 情况1:开发环境
// (1): externals无值(不排除第三方包)
// (2): index.html里不引入cdn地址
// 情况2:生产环境
// (1): externals有值(排除第三方包)
// (2): index.html引入cdn地址