vue开发者vite多环境配置,终于搞明白了 | 您所在的位置:网站首页 › vue哪个公司开发的 › vue开发者vite多环境配置,终于搞明白了 |
在看项目的过程中,发现有类似服务端多环境配置的配置,所以研究了下,在网上有多个方案,选了一个当前在用的吧,另外一个没验证 1、原理对于使用Vite构建的Vue项目,可以使用Vite提供的环境变量来实现多环境配置。 Vite 使用 dotenv 从 环境文件目录 中加载环境文件,默认情况下,环境文件目录为项目的根目录,即把环境文件放在项目根目录下。 环境文件命名如下: .env # 所有情况下都会加载 .env.local # 所有情况下都会加载,但会被 git 忽略 .env.[mode] # 只在指定模式下加载 .env.[mode].local # 只在指定模式下加载,但会被 git 忽略 复制代码不同环境的变量可以定义在 .env.[mode] 文件中,如 .env.dev、.env.prod 等,如果 .env 文件和 .env.[mode] 中有相同的 key,后者定义的值会覆盖前者。 这里咱们以三个环境为例编写 demo,分别是: 开发环境,mode 为 dev,文件名为 .env.dev 测试环境,mode 为 uat,文件名为 .env.uat 生产环境,mode 为 prod,文件名为 .env.prod 2、创建配置文件使用 .env 文件来设置特定环境的变量。Vite 会自动加载 .env 文件,而且支持使用不同的 .env 文件来为不同的环境提供变量。 在项目根目录下创建.env.dev、.env.test和.env.prod等环境变量文件,并在其中定义各个环境的变量。例如: NODE_ENV="development" VITE_BASE_API="http://172.26.1.152:80" VITE_BASE_WS="ws://172.26.1.152:18083" 注意,变量名必须以VITE_开头,这是Vite默认的前缀。 3、使用多环境配置package.json中配置启动脚本,使用配置 "scripts": { "dev": "vite --mode dev", "test": "vite --mode test", "prod": "vite --mode prod", "build": "vue-tsc && vite build", "build:dev": "vue-tsc --noEmit && vite build --mode dev", "build:prod": "vue-tsc --noEmit && vite build --mode prod", "preview": "vite preview" }, 复制代码 4、使用环境变量在Vue组件中使用环境变量: {{ apiURL }} export default { data() { return { apiURL: importa.env.VITE_BASE_API } } } 复制代码在Vue组件中可以通过importa.env.VITE_API_URL来访问环境变量。 5、关于编辑器提示可以添加 vite-env.d.ts解决。如果不存在这个文件,在 src 目录下创建文件 vite-env.d.ts,我的项目下有,不记得是不是自己手动创建了 /// interface ImportMetaEnv { readonly VITE_BASE_API: string; readonly VITE_BASE_WS: string; } 复制代码 6、最后验证下main.ts 打印下环境变量 客户端访问,打开控制台可以看到环境变量,试着切换下看看生效了吗 process.env是Node.js中的全局变量,用于访问进程中的环境变量。在前端开发中,我们通常使用Webpack等构建工具来打包应用程序,因此需要在构建过程中设置环境变量。在Webpack中,可以使用DefinePlugin插件将环境变量注入到应用程序中,然后在代码中通过process.env来访问这些变量。 例如,在Webpack中设置一个名为API_URL的环境变量,可以在代码中通过process.env.API_URL来访问它: // webpack.config.js module.exports = { plugins: [ new webpack.DefinePlugin({ 'process.env.API_URL': JSON.stringify('https://api.example.com') }) ] } 复制代码// app.js console.log(process.env.API_URL) // 'api.example.com' importa.env是在ES模块中定义的全局变量,用于访问Vite构建的应用程序中的环境变量。在Vite中,可以在.env文件中定义环境变量,然后在Vue组件和JavaScript模块中通过importa.env来访问这些变量。 需要注意的是,process.env和importa.env的作用域不同,前者作用于整个Node.js进程,后者只作用于当前的JavaScript模块或Vue组件。因此,它们的用法和使用场景也有所不同。 |
CopyRight 2018-2019 实验室设备网 版权所有 |