vue开发区分开发环境和生产环境，以及预发布环境

本文主要是介绍vue开发区分开发环境和生产环境，以及预发布环境，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue开发区分开发环境和生产环境，以及预发布环境

在根目录创建 .env[mode] 文件，在项目执行 npm run dev 的时候vite会自动去读取.env.development文件里面的配置，执行npm runbuild进行打包之后也会自动将.env.production的内容打包进去，这里注意的是，如果你想进入预发布模式的话需要在打包的时候进行mode配置:npm run build --mode staging
公共的 .env
开发环境 .env.development
生产环境 .env.production
预发布环境 .env.staging

在.env.development配置了一个域名:

`.env.development`
// 开发环境配置
VITE_BASIC_URL = https://baidu.com

如何使用

针对不同的环境可以去配置不同的请求地址，例如页面的统一标题，参数常量…
下面根据环境配置不同的请求域名

import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {// 获取当前环境的配置const config = loadEnv(mode, './')return {server: {proxy: {'/basice': {target: config.VITE_BASIC_URL,changeOrigin: true,rewrite: (path) => path.replace(/^\/basice/, '')}}},}
})

以上是vite.config.js的配置，上面展示了在不同环境下去请求对应环境的域名并且配置代理进行跨域

这篇关于vue开发区分开发环境和生产环境，以及预发布环境的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---