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 这样就可以了 自己挖的坑自己填啊