Vue 项目环境变量

配套B站视频:拾光之城Ray环境变量文件规范在项目根目录下通过不同后缀的.env文件来区分环境.env全局默认环境配置所有环境都会加载.env.development开发环境专属配置npm run serve时加载.env.production生产环境专属配置npm run build时加载我们这里只创建.env.development开发环境专属配置npm run serve时加载.env.production生产环境专属配置npm run build时加载环境变量命名规则只有以VUE_APP_开头的变量才会被process.env识别并注入到客户端代码中。示例.env.development# 开发环境接口基础路径 VUE_APP_BASE_URL /api # 开发环境后端服务地址 VUE_APP_SERVER_PATH https://www.vue-js.com/api在代码中使用环境变量import axios from axios export default function request(config) { const instance axios.create({ baseURL: process.env.VUE_APP_BASE_URL, // 环境变量 timeout: 5000 }) instance.interceptors.request.use(config { return config }) instance.interceptors.response.use(res { return res.data }) return instance(config) }vue.config.js 代理配置在开发环境中我们通过devServer.proxy配置代理解决跨域问题同时结合环境变量实现灵活代理。const path require(path) const repacePath ^ process.env.VUE_APP_BASE_URL function resolve(dir) { return path.join(__dirname, dir) } module.exports { configureWebpack: { resolve: { alias: { : resolve(src), public: resolve(public), components: resolve(src/components), views: resolve(src/views), utils: resolve(src/utils) } } }, devServer: { proxy: { [process.env.VUE_APP_BASE_URL]: { target: process.env.VUE_APP_SERVER_PATH, changeOrigin: true, pathRewrite: { // 重写路径 [repacePath]: // 把/api变为空字符串 } } } } }命令与使用配置文件关系你运行的命令加载的环境文件作用npm run serve.env.env.development本地开发、调试、联调后端npm run build.env.env.production打包上线、生产环境、真实服务器