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, }
|