vue.config.js常见配置

butterYou
308 阅读2分钟

前言

vue.config.js文件常用到的一些配置，怕时间长忘记了，自己记录一下

vue cli中讲vue.config.js的官网链接：cli.vuejs.org/zh/config/ 贴一个链接，方便自己之后了解和补充

是一个什么样的文件

这个文件导出一个包含选项的对象：

module.exports = {
    //选项... 
    //所有配置写在这里面
}

它和package.js文件同级，但是一个可选的配置文件，也就是说你的项目中不一定需要这个文件；现在vue cli 搭建的项目没有这个文件了，要配置的话需要自己创建

常用配置

- publicPath

当我们部署应用包的时候，可能会这样部署，``部署在www.XXX.com/ 域名的根路径下或者 www.XXX.com/AA/ 子路径下；

如果是根路径下，那么publicPath：'/';

如果是子路径下，那么publicPath：'/AA/'

- devServer

和webpack的devServer的选项是一样的,作用是配置我们的开发服务器

有一些常用的配置：

- port

监听请求的端口号，默认是8080，如果8080被占用就使用8081，如果8081被占用就使用8082，以此类推；所以本地启动项目的时候一般都是http://localhost:8080

- open

open:true 项目运行后，自动打开浏览器

- proxy

代理开发环境中的url

前提时在开发环境下，前端的项目和后端服务器没有在同一个主机上时，前端请求可能就会发生跨域，请求被浏览器拦截，那么我们就需要配置proxy将请求的url代理到服务器的url

module.exports = {
    devserver:{
        proxy:"http://xxx.xx.xx:port"
    }
}

开发服务器就会将任何未知的请求代理到http://xxx.xx.xx:port 也就是说假如你的url原本是http:localhost:8080/test 经过代理就变成了http://xxx.xx.xx:port/test 这样就绕过了跨域

如果需要更多的代理行为，可以这样写：

module.exports = {
    devserver:{
        proxy:{
            '/api':{
                target: 'http://xxx.xx.xx:8080',
                changeOrigin: true，
                pathRewrite:{'^/api':''}
             },
             'load':{
                target: 'http://xxx.xx.xx:8081',
                changeOrigin: true
             }
        }
    }
}

假如原本的请求是http:localhost:8080/api/login

changeOrigin：设置为true时(为true的时候才会跨域)，就会被代理为http://xxx.xx.xx:8080/api/login

pathRewrite：重写路径,设置为{'^/api':''}，意思就是去掉请求中的'/api'，请求变为http://xxx.xx.xx:8080/login;

同理设置为{'^/api':'/app'}，就是把/api变为/app，即http://xxx.xx.xx:8080/app/login

avatar
文章
阅读
粉丝