env配置开发、测试、正式环境

原创已于 2024-03-21 18:11:09 修改 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-03-21 16:48:57 首次发布

本文介绍了如何在VueCLI项目中通过创建不同环境的.env文件、修改config.js配置proxy和在package.json中设置脚本来自动切换服务器地址，简化打包上传过程并避免混淆，确保线上环境的正确性。

部署运行你感兴趣的模型镜像

每次打包上传代码都要来回切换不同环境的服务器地址，不仅麻烦，而且经常会弄混乱，导致线上出错。

一、在根目录创建.env文件

具体查看官方文档：模式和环境变量 | Vue CLI

1、开发环境（.env.development）

NODE_ENV = development
VUE_APP_API_URL = 'http://*****'
VUE_APP_SERVER_URL = ''

2、测试环境（.env.test）

NODE_ENV = test
VUE_APP_API_URL = 'http://****'
VUE_APP_SERVER_URL = '/api'

3、正式环境（.env.production）

NODE_ENV = production
VUE_APP_API_URL = 'http://*****'
VUE_APP_SERVER_URL = '/api'

二、修改config.js

const {
  defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
  // 打包后的目录
  outputDir: process.env.outputDir,
  // 配置代理服务
  devServer: {
    proxy: process.env.VUE_APP_API_URL,
  }
})

三、配置运行方法（package.json）

"scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service build --mode test",   // 打包测试
    "pro": "vue-cli-service build && vue-cli-service build --mode test"  // 打包测试和线上
  },

打包命令为：

test：npm run test

您可能感兴趣的与本文相关的镜像

Qwen3-8B

文本生成

Qwen3

Qwen3 是 Qwen 系列中的最新一代大型语言模型，提供了一整套密集型和专家混合（MoE）模型。基于广泛的训练，Qwen3 在推理、指令执行、代理能力和多语言支持方面取得了突破性进展