关于vue-cli3.0配置文件vue.config.js的问题

背景

在使用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',都能正常请求到数据。
  而他们的区别在于：

1. 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进行访问
2. 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: '',
                ws: true,
                changeOrigin: true
            ……
            },
            '/foo': {
                target: ''
            ……
            }
        },