vue config files config

阅读前如果对vue env设置不理解的请先查看 vue env file
alias设置不理解的请查看vue resolve alias config

为了方便调用不同环境下的不同配置文件,利用webpackaliasenv来处理调用配置文件的问题


update vue.config.js

这里添加一个alias设置,指定configs文件夹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require('path');
// get envs
const mode = process.env.VUE_APP_MODE ? `${process.env.VUE_APP_MODE}/` : '';

module.exports = {
configureWebpack: {
resolve: {
alias: {
'~components': path.resolve(__dirname, 'src/components'),
'~store': path.resolve(__dirname, 'src/store'),
'~libs': path.resolve(__dirname, 'src/libs'),
'~interfaces': path.resolve(__dirname, 'src/interfaces/'),
icons: path.resolve(__dirname, 'node_modules/vue-material-design-icons'),
// add this line
'~configs': path.resolve(__dirname, `src/configs/${mode}`)
}
}
}
};

update tsconfig.json

这里paths添加一行~configs设定

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
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"esModuleInterop": true,
"experimentalDecorators": true,
"importHelpers": true,
"jsx": "preserve",
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
],
"module": "esnext",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
],
"~components/*": [
"src/components/*"
],
"~configs/*": [
"src/configs/*"
],
"~interfaces/*": [
"src/interfaces/*"
],
"~libs/*": [
"src/libs/*"
],
"~store/*": [
"src/store/*"
]
},
"sourceMap": true,
"strict": true,
"target": "esnext",
"types": [
"webpack-env",
"mocha",
"chai"
]
},
"exclude": [
"node_modules"
],
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
]
}

~configs 下多级目录时应该将目录写入配置,否则typescript会报错

1
2
3
4
5
"~config/*": [
"src/configs/*",
"src/configs/production/*",
"src/configs/development/*",
]

文件目录

1
2
3
4
5
6
7
▾ src/
▸ assets/
▸ components/
▾ configs/
test/
config.ts # VUE_APP_MODE=test
config.ts # normal

usage

1
2
3
import a from '~configs/config';

console.log(a);

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×