【vue-cli、nginx】 vue-cli的环境配置，项目部署、nginx反向代理

vue-cli的环境配置

在vue-cli里，区分不同的环境，需要在与src同级的目录下配置以 .env 开头的文件，例如：
.env.development

NODE_ENV = 'development'
VUE_APP_MODE = 'dev'
VUE_APP_TITLE = '开发环境'
VUE_APP_API_URL = '/file-addr'

.env.test

NODE_ENV = 'test'
VUE_APP_MODE = 'test'
VUE_APP_TITLE = '测试环境'
VUE_APP_API_URL = '/file-addr'

.env.production

NODE_ENV = 'production'
VUE_APP_MODE = 'prod'
VUE_APP_TITLE = '生产环境'
VUE_APP_API_URL = '/file-addr'

• NODE_ENV ：将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。
• VUE_APP_* ：环境变量，可以被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_MODE)

vue-cli 项目部署

1、本地热部署（用于开发）
在命令行窗口输入

npm run serve

这条命令是在 package.json 里配置好的

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test"
  },

其中 ：
vue-cli-service serve 如果不指定--mode，默认是以 development 的环境模式启动的
vue-cli-service build 如果不指定--mode，默认是以 production 的环境模式打包的

另外，如果想在本地开发部署的情况下启用反向代理，可以在src的同级目录下，新建 vue.config.js配置文件，例如：

// vue.config.js
module.exports = {

  productionSourceMap: false,

  //打包app时放开该配置
  publicPath:'./',
  
  devServer: {
    port: 3000,
    host: 'localhost',
    proxy: {
      '/file-addr': {
        target: 'http://127.0.0.1:9090', //请求本地
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          "^/file-addr": ""
        }
      },
    }
  },

  lintOnSave: undefined
};

然后我们可以自己包装一下axios组件，自建一个request.js的通信工具类，以配置请求url的前缀

axios 会走 devServer 代理

import axios from 'axios'

let baseURL = '';

if(process.env.VUE_APP_MODE === 'dev'){
  baseURL = process.env.VUE_APP_API_URL;
}else if(process.env.VUE_APP_MODE === 'prod'){
  baseURL = process.env.VUE_APP_API_URL;
}

// 创建 axios 实例
const service = axios.create({
  baseURL: baseURL, //设置请求地址
  timeout: 60000 // 请求超时时间
});

const err = (error) => {
  if (error.response) {
    let data = error.response.data;
    console.log("------异常响应------",error.response.status);
  }
  return Promise.reject(error);
};

// 添加请求拦截器
service.interceptors.request.use(config => {
  //这里设置请求头
  return config;
},(error) => {
  return Promise.reject(error)
});

// 添加响应拦截器
service.interceptors.response.use(response => {
  return response.data;
}, err);

export {
  service as axios
}

这里的发起的 http请求，并没有携带ip和端口号，是因为 /就表示当前页面的地址（包括了ip和端口号）

这样，我们在代码中使用axios，可以不用写具体的接口ip地址，让配置的devServer反向代理，例如：

import {axios} from '../utils/request'
....
....

   list(){

     let url = '/filemanager/file/list';

     axios.get(url).then((response)=>{
       console.log(response);
       this.dataSource = response;
     }).catch((err)=>{
       console.log(err);
       this.$message.error('获取文件列表失败');
     }).finally(()=>{

     });
   }

对应的后端接口url：http://localhost:9090:/filemanager/file/list

2、生产环境部署（Linux服务器部署）
1）打包项目（用于投产或者是提测）
在命令行窗口输入：

npm run build

接着就会在src的同级目录生成一个dist文件夹

把这个文件夹上传到服务器的 nginx / html目录里。

2）配置nginx反向代理
配置 nginx / conf 文件夹下的 nginx.conf

server {
        listen       8765;
        server_name  localhost;

        location / {
            root   /usr/local/nginx/html/dist;
            index  index.html index.htm;
        }

        location @router {
            rewrite ^.*$ /index.html last;

        }

        location ^~ /file-addr {
                proxy_pass          http://127.0.0.1:9090/;
                proxy_set_header        Host 127.0.0.1;
                proxy_set_header        X-Real-IP $remote_addr;
                proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

最后启动 nginx 即可