【Vue】部署、测试

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