vue环境配置及相关解析

不爱说话的嘎球
486 阅读3分钟

vue环境配置相关解析

玩vue一段时间，都是云里雾里的跟着网上配置照搬，其实还未深刻理解每个配置具体的相关应用场景，vue.config.js该配置是一些跟运行及打包时候的相关内容，在一系列测试过后，慢慢的梳理了以下心得。

CROS跨域处理

开发初期，大家一般都会遇到CORS跨域，如下图所示：

image.png

  1. 服务端白名单配置 第一次对接的服务端，他也是初次接触前后分离项目，为了配合前端解决本地开发环境跨域问题，他是在服务端做了白名单配置，也就是将你的localhost:8080 以及 192.168.xx.xx:8080的IP地址报给服务端，他们将你的IP或域名写入白名单即可直接访问。 优点：前端省事，不用做任何处理，即可直接访问API接口。 缺点：如果你IP变了，或者此时可能需要运行多个项目，而你的端口号变了，则需要每次向服务端报备地址。

  2. vue.config.js的proxy配置

proxy是个好东西，不管你是http请求还是https，都可以通过proxy来处理。

// vue.config.js
module.exports = {
    publicPath: process.env.VUE_APP_PUBLIC_PATH, //npm构建后的基本路径、相对路径
    outputPath: process.env.VUE_APP_OUTPUT_PATH, //npm run build打包后输出的目录地址
    devServer: {
        proxy: {
            '/newapi': {
                target: 'https://abc.baidu.com',
                ws: false, //如果要代理 websockets，配置这个参数
                changeOrigin: true, //是否跨域
                pathRewrite:{ 
                    '^/newapi':'/api'  //api前缀重写, /newapi/test => https://abc.baidu.com/api/test
                }
            },
            '/': {
                target: 'https://bcd.baidu.com',
                ws: false, 
                changeOrigin: true, 
                pathRewrite:{ 
                    '^/api':'/api' 
                }
            }
            
        }
    }
}
console.log('NODE_ENV-------'+ process.env.NODE_ENV) // 命令行运行的时候，查看构建环境信息


this.$axios.post('/newapi/login', json).then((res) => { 
    console.log(res); 
})

image.png

说明：

  • 多个代理需注意顺序，因为“/”字符匹配数比较高，请放到后面，优先匹配'newapi'
  • 如果本地需要区分接口是不同服务器的，可以用pathRewrite来处理
  • proxy的设定仅作用于本地开发环境的配置，对于build打包后的环境请求，并不是在这里设定
  • publicPath配置打包后，部署生产环境和开发环境下的URL，可对当前环境进行区分

本地环境html打包后结果 image.png

线上环境html的路径结果 image.png

如果显示服务器上需要配置前缀，也可以通过publicPath来控制 image.png

环境配置

因为接口来自两个不同的服务器，之前误以为pathRewrite能搞定，可当build打包之后，发现显示的接口请求根本不会按照proxy配置的target去请求，更不会去做pathRewrite，这时候可以用process.env环境变量来控制。

环境变量 process.env.NODE_ENV 本地默认是"development"，生产环境是“production”

development => npm run serve 运行后的本地开发环境

production => npm run build 打包后的线上生产环境

在src同级目录下创建.env.development和.env.production

.env.development配置信息如下：

VUE_APP_SERVE_URL = ''
VUE_APP_PUBLIC_PATH = '/'
VUE_APP_OUTPUT_PATH = ''  // 本地环境没有打包配置项

.env.production配置信息如下：

VUE_APP_SERVE_URL = 'https://abc.baidu.com'
VUE_APP_PUBLIC_PATH = ''
VUE_APP_OUTPUT_PATH = 'dist'  //生产环境build后以dist文件夹为目录

※ 注意：环境变量下定义的变量，必须使用VUE_APP_开头，否则无效。

对应的环境信息就可以配置到vue.config.js和axios请求，以及各个页面代码中

// src/libs/request.js axios请求封装
import Axios from "axios";

const header = { 
  'content-type': 'application/x-www-form-urlencoded',
};

const request = Axios.create({
  timeout: 10000,
  responseType: "json",
  responseEncoding: "utf8",
  baseURL: process.env.VUE_APP_SERVER_URL,  // 根据不同环境显示不同SERVE_URL
  headers: header,
});

// 请求拦截器
request.interceptors.request.use((config) => {
    // ....
    return config
}), function (error) {
  console.error(error);
});

// 响应拦截器
request.interceptors.response.use((response) => {
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
    // 否则的话抛出错误
}),(error) => {
    // 异常抛出
}

export default request;


// src/lib/api.js
import request from '@/libs/request';
import qs from 'qs';

const API = '/api'
let API_NEW = '/newapi'

if(process.env.NODE_ENV !== 'development'){
    API_NEW = '/api'  //模拟proxy的pathRewrite，根据环境重写api前缀
}

export const getData = params => {
  return request({
    url: `${API_NEW}/data`,
    method: 'get',
    params,
  });
};

export const getData2 = params => {
  return request({
    url: `${API_NEW}/data`,
    method: 'get',
    params,
  });
};

export const postData = params => {
  return request({
    url: '/api/data',
    method: 'post',
    data: data: qs.stringify(params)
  });
};

// page.vue
import {getData} from '@/libs/api'; 

create(){
    getData({id: 123}).then(res=>{
        console.log(res)
    })
}

当进行api请求时，本地环境会根据proxy的设定自动忽略该配置项，build打包后的线上环境，依据baseURL的内容进行增加请求前缀，baseURL => Host image.png

自定义环境配置

当如线上环境可能不止一个，可能有生产环境、开发测试环境，你还可以来个自定义环境变量 再创建一个.env.dev文件，这个dev和development的环境变量不同 .env.dev配置信息如下：

VUE_APP_SERVE_URL = 'https://abc-test.baidu.com'
VUE_APP_PUBLIC_PATH = ''
VUE_APP_OUTPUT_PATH = 'dev'

※ vue.config.js文件的配置信息，看最顶上的对应代码

接着修改package.json文件，如果只有development和production两个环境变量可不修改，有自定义环境变量，可以自定义打包命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "dev": "vue-cli-service build --mode dev", //可以这么写，打包的时候运行npm run dev
    "build:dev": "vue-cli-service build --mode dev" //也可以这么写，打包的时候运行npm run build:dev
  },

image.png

多环境配置，build遇到的坑

当我执行npm run dev的时候，部署到线上，发现baseURL配置的环境url根本没有执行，它还是跟本地开发环境一样，没有前缀是空的host，api请求一直不是我想到的目标路径，对比了dist和dev两个文件夹下的文件，dist也没看出相关的baseUrl放在哪，后来猛地突然发现dist与dev打包后文件格式不同

image.png

image.png

后来参考了：blog.csdn.net/weiwei_xue/…

解决办法是给.env.dev增加NODE_ENV = 'production'

NODE_ENV = 'production'
VUE_APP_SERVE_URL = 'https://abc-test.baidu.com'
VUE_APP_PUBLIC_PATH = ''
VUE_APP_OUTPUT_PATH = 'dev'  //打包输出的文件夹目录为dev

意思就是让dev环境照着系统默认的生产环境模式进行打包，但其他配置信息依然根据VUE_APP_下的变量判断

具体生产环境production为什么会打包成三个目录，文件夹内容又有哪些差异点，如何定义生产环境打包后的信息，目前还没有研究透，待日后研究明白了，再做补充。

相关参考：

blog.csdn.net/qq_38543537… blog.csdn.net/shiaijuan1/… blog.csdn.net/weiwei_xue/…

avatar
文章
阅读
粉丝