背景
在使用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>'
……
}
},