vue-cli环境变量配置
四种方式来制定环境变量:
在根目录添加.env文件,配置所有情况下都会用到的配置(不知道这个存在的意义,所有的都需要的也就不需要配置了吧)。
在根目录添加.env.local 文件,配置所有情况下都会用到的配置,与.env的区别是只会在本地,该文件不会被git跟踪。
在根目录添加.env.[mode] 文件,配置对应某个模式下的配置,比如:.env.development来配置开发环境的配置。
在根目录添加.env.[mode].local文件,配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效,该文件不会被git跟踪。
在文件中,我们只需要以key=value的方式就可以设置变量了。
配置文件:
使用:
在项目中
在Webpack中
直接用process.env.xxx使用
跨域
webpack解决方案:
使用devServer的proxy进行代理
devServer: {
port: port,
proxy: {
// 代理 /dev-api/user/login 到 http://127.0.0.1:3000/user/login
'/dev-api/user/login': {
target: `http://127.0.0.1:3000/`,
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: ""
}
}
},
}
CORS解决方案:
后台请求头配置:Access-Control-Allow-Origin:*
Nginx反向代理和部署
我们的页面放在Nginx服务器,自然和Nginx不存在跨域问题,可以用Nginx请求API接口,然后把结果返回给页面。
在nginx的conf文件夹nginx.config中配置反向代理
匹配到/api/请求时候,代理到 http://localhost:3000这个地址去
部署
1、打包项目,生成dist目录
2、打开nginx文件夹的conf下的nginx.conf文件
3、根据打包路径上下文,把dist文件目录修改一下,新增一级文件夹best-practice(如果没有配置publicPath可以不用做这一步操作)
把原本dist目录下的文件放入best-practice文件夹中
4、配置nginx服务信息
在http 的 server 下新增如下配置
# 项目根,大家改成自己的目录
root C:\Users\Administrator\Desktop\web11期课件\07课vue项目最佳实践(7月10号)\vue-study\dist; #项目dist目录
# history fallback
location /best-practice {
#try_files 尝试访问路径对应的文件或者文件夹
#比如/best-practice/login => $uri
#如果这个地址不是静态资源,则回退到下面的/best-practice/index.html
try_files $uri /best-practice/index.html;
}
#反向代理,实现接口转发
location ^~ /api/ {
# 把/api去除
rewrite ^/api/(.*)$ /$1 break;
# 代理到3000服务上
proxy_pass http://localhost:3000;
}
5、在nginx根目录使用命令行工具启动nginx服务器
启动命令:start nginx