vue环境变量配置 -- devServer

development Server只在开发阶段起作用

根据当前项目中的node环境变量,进行切换对应的打包方式或baseUrl

在vue.config.js中

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer:{
    // 代理---跨域请求
    proxy:{
      '/api':{ // 表示当前请求的域名地址中包含'/api'字段,则请求
        target:'http://47.94.148.165:3001/',
        ws:true, // 不写 默认为true 用于支持webstocket
        changeOrigin:true, // 不写 默认为true 
        pathRewrite:{'^/api':''} // 发送请求中包含api
      }
    }
  }
})

封装的axios

import axios from "axios";
import { Toast } from "vant";
import router from "@/router";
// console.log(process.env.NODE_ENV);
let baseURL = ''
if (process.env.NODE_ENV == 'development') {
    // 是在开发中
    baseURL = '/api'
} else {
    baseURL = '最终地址'
}
const instance = axios.create({
    baseURL: baseURL,
    // baseURL: '/api',
    timeout: 8000,
    headers: { 'Content-Type': 'application/json' }
});
instance.interceptors.request.use(function (config) {
    // console.log('config',config);
    let token = localStorage.getItem('token')
    if (token) {
        config.headers.token = token
    }
    // console.log('config.headers',config.headers);
    return config
}), function (err) {
    return Promise.reject(err)
}
instance.interceptors.response.use(function (response) {
    // console.log(response);
    if(response.data.code == '10119'){
        // token失效
        Toast({
            type:'fail',
            message:'登录过期,请重新登录',
            duration:3000,
            onClose(){
                router.push('/login')
            }
        })
    }
    return response.data
}, function (err) {
    return Promise.reject(err)
})
export default instance

在项目中配置的proxy代理,只是针对于开发环境中起作用,放到服务器上并不起作用。