使用 vue-cli 3.0 遇到的小问题

561 阅读1分钟

vue-cli 3.0官方文档: cli.vuejs.org/zh/guide/

安装使用之类的就不做介绍了,文档里写的很清楚,在这里主要是说一下遇到的小问题。

1、配置环境(开发环境&生产环境)

在根目录下创建两个文件:

.env.development   开发  写入内容:VUE_APP_URL = "http://devel.com"
.env.production    生产  写入内容:VUE_APP_URL = "http://product.com"

切记变量名必须以 VUE_APP_ 开头才行。

如果你是用的axios请求数据的,在配置中就直接可以这样使用了:
baseURL: process.env.VUE_APP_URL
这样就可以直接拿到url

2、跨域问题

3.0去掉了很多配置文件,那我们如果要修改配置的话,需要在根目录创建一个名为 vue.config.js 的文件,所有的webpack配置将会在这里修改。

写入:module.exports = {
        devServer: {
            open: true,     //自动打开浏览器
            port: 7777,     //修改端口号为7777
            https: false,   //是否必须为https协议
            proxy: {
                '/': {
                    target: 'http://devel.com',
                    changeOrigin: true,
                    ws: false,
                    pathRewrite: {
                        '^/': ''
                    }
                }
            }
        }
    }
devServer选项配置: https://webpack.js.org/configuration/dev-server/#devserver


然后重新启动就可以了

那么问题来了  如果你在axios的配置中 设置了 baseURL: process.env.VUE_APP_URL

你会发现你配置的代理没有生效,依然存在跨域问题

解决办法:baseURL:""   不要设置默认URL  这样就可以了 自己挖的坑自己填啊