背景
在使用vue-cli搭建vue项目的时候，由于3.0比起2.x精简了许多配置文件，所以需要自己手动配置相关的配置文件，即在根目录下新建一个vue.config.js，并在其中配置相关选项
PS:
- vue-cli2.x版本搭建项目使用的命令是
vue init webpack test1,test1是项目名 - vue-cli3.0版本搭建项目使用的命令是
vue create test2,test2是文件名
问题描述
这两天帮同学写前端界面，因为刚开始是在局域网中调用接口，但是之后部署到阿里云后要调用另一个域名下的接口，然后在webpack-dev-server再修改其参数的时候，明明其他配置没有变，只是改了url就会出现各种错误：“500”、“跨域”、“巴拉巴拉……”，但是postman测试接口都没有问题，所以被折磨了一下午，不堪其辱的我！终于决定要好好看看这个 webpack-dev-server配置！
配置归纳
整个config配置
下面是我项目整个config的配置(好多都是默认的)
module.exports = {
// 基本路径
baseUrl: '/',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// webpack配置
chainWebpack: () => { },
configureWebpack: () => { },
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
parallel: require('os').cpus().length > 1,
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: true, //配置自动启动浏览器
host: 'localhost',
port: 8080, // 端口号
https: false,
hotOnly: false, // https:{type:Boolean}
proxy: { // 配置跨域
'/api':{
target:'http://xxx.xx.xxx.xxx:8080', //源地址
changeOrigin:true, //改变源
ws:true, //是否代理websockets
pathRewrite:{
'^/api':''
}
}
}, // 配置跨域处理,只有一个代理
before: app => { }
},
// 第三方插件配置
pluginOptions: {}
}
webpack-dev-server的配置
- open:项目通过
npm run serve编译好后是否自动打开项目网站 - host:这个东西就很有讲究了：网上好多都是配置为
host: '0.0.0.0',如果将其设置为host: '（本机IP地址）',host: 'localhost',都能正常请求到数据。
而他们的区别在于：
host: '0.0.0.0':你既可以在本地用http://localhost/yoursite的url访问项目，也可以用http://xxx.xx.xxx.xxx/yoursite访问项目。其中xxx.xx.xxx.xxx是你的本机IP。
比如你的计算机IP地址是123.45.67.89，项目名称是app，那么你的访问url就可以是http://localhost/app，或者http://123.45.67.89/app
这样设置的好处是，当你想用非本机访问项目进行测试时，由ip地址构建的url可以对项目进行访问，同时本地还可以用localhost进行访问host: '123.45.67.89': 如果将IP写死了，那么只有这个'123.45.67.89'IP才可以访问调用接口数据，那么localhost就无法访问了（除非localhost就是这个IP）
- proxy:设置代理
因为浏览器的同源策略，调用不同域的资源就会产生跨域的问题，所以需要设置代理配置跨域，才能正常请求到其他域下的资源
设置代理, 首先得有一个标识, 确认哪一个连接要用代理. 不然的话, html, css, js这些静态资源都使用代理的网址调用. 所以只有需要调用的接口用代理, 静态文件用本地.
-
'/api':{}：接口只要是'api'开头的才用代理.这个'api'即标识 -
target:源地址，即请求接口的url前缀，如果我的接口都在http://xxx.xx.com下，那么源地址就是http://xxx.xx.com -
changeOrigin:是否允许跨域 -
ws:是否代理websockets -
pathRewrite:{'^/api':''}:顾名思义，这是 ' 路径重写 ’ 的意思
当设置了标识符后，接口调用就要这么写 :/api/delete?id=123，最后请求的路径就是 http://xxx.xx.com/api/delete?id=123.但是如果正确的接口路径里面没有/api. 所以就需要pathRewrite,用'^/api':'', 把'/api'用空字符代替,最后请求的路径就是http://xxx.xx.com/delete?id=123了.这样既能有正确标识, 又能在请求接口的时候去掉api.
同理,proxy配置多个代理,使用不同对象进行分开配置:
proxy: { // 配置多个代理
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
……
},
'/foo': {
target: '<other_url>'
……
}
},
