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
|
const TerserPlugin = require('terser-webpack-plugin')
const env = process.env.NODE_ENV;
module.exports = {
baseUrl: './',
outputDir: 'user-behavior-analysis',
devServer: {
open: true,
port: 8080,
https: false,
hotOnly: true,
disableHostCheck: true,
open: true,
proxy: {
'user-analysis-cms/': {
target: 'http://test.xx-motor.com/',
changeOrigin: true,
pathRewrite: {
'user-analysis-cms/': 'user-analysis-cms/',
},
cookieDomainRewrite: {
'localhost:8080': 'http://test.xx-motor.com/',
},
}
before: (app) => {},
},
configureWebpack: {
optimization: {
minimizer: [
]
},
},
chainWebpack: (config) => {
config.resolve.symlinks(true);
},
};
|
devServer配置
这里写你调用接口的基础路径来解决跨域，如果设置了代理，那你本地开发环境的axios的baseURL要写成空字符串。
只有一个接口ip端口时
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
| module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
outputDir: "mycli3",
assetsDir: "assets",
filenameHashing: false,
lintOnSave: true,
productionSourceMap: false,
devServer: {
host: "0.0.0.0",
port: 8080,
https: false,
open: true,
proxy: {
"/api": {
target: "http://192.168.x.xxx:8090",
ws: true,
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
}
}
};
|
解决跨域原理
1
2
3
4
5
6
7
8
9
10
11
| module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
}
}
}
};
|
changeOrigin默认为false，请求头中的host仍然是浏览器发送过来的host 。如果设置为true，请求头中的host会设置成target，且本地会虚拟一个服务器接受你的请求并代你发送该请求。
outputDir构建输出目录
当运行vue-cli-server build时生成的生产环境构建文件的目录
1
2
3
4
| module.exports = {
outputDir: 'dist'
}
|
错误案例
1
2
3
4
5
| module.exports = {
publicPath: './',
outputDir: 'aaa'
}
|
注意点：
- vue.config.js文件必须放在与
package.json同级。
- publicPath：
./是针对hash路径的，/是history的。
单路径代理
1
2
3
4
5
6
7
8
| module.exports = {
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}
};
|
请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/api/user
多路径代理
如果你想要代码多个路径代理到同一个target下, 你可以使用由一个或多个「具有 context 属性的对象」构成的数组：
1
2
3
4
5
6
7
8
9
| module.exports = {
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'http://localhost:3000',
}]
}
};
|
路径重写
如果你不想始终传递 /api ，则需要重写路径：
1
2
3
4
5
6
7
8
9
10
11
| module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''}
}
}
}
};
|
请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/user
使用无效证书的服务器
默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果你想要接受，只要设置 secure: false 就行。修改配置如下：
1
2
3
4
5
6
7
8
9
10
11
| module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false
}
}
}
};
|
跳过代理
有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。
在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径，来跳过代理请求。
例如：对于浏览器请求，你想要提供一个 HTML 页面，但是对于 API 请求则保持代理。你可以这样做：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf('html') !== -1) {
console.log('Skipping proxy for browser request.');
return '/index.html';
}
}
}
}
}
};
|
vue-cli中proxyTable配置接口地址代理实例
修改config/index.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
| module.exports = {
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'https://wangyaxing.cn',
secure: false,
changeOrigin: true,
},
'/img': {
target: 'https://cdn.wangyaxing.cn',
secure: false,
changeOrigin: true,
pathRewrite: {'^/img': ''}
}
},
host: 'localhost',
port: 4200,
}
|
