vue3 + vite 环境变量配置

1、设置开发环境启动命令使用的环境变量 “dev”: “vite --mode development”,
在package.json文件中:
{
  "name": "test",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --mode development",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "ant-design-vue": "^2.2.8",
    "axios": "^0.24.0",
    "js-cookie": "^3.0.1",
    "qs": "^6.10.3",
    "vue": "^3.2.25",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "less": "^4.1.2",
    "vite": "^2.7.2",
    "vite-plugin-cdn-import": "^0.3.5",
    "vite-plugin-components": "^0.13.3",
    "vite-plugin-compression": "^0.4.0",
    "vite-plugin-imagemin": "^0.5.1",
    "vite-plugin-imp": "^2.1.3"
  }
}
在.env.development 文件中:
VITE_BASE_API = "http://182.603.239.5300:8088"
在api.js文件中打印:
console.log(import.meta.env);
打印结果:
BASE_URL: "/"
DEV: true
MODE: "development"
PROD: false
SSR: false
VITE_BASE_API: "http://182.603.239.5300:8088"

在这里插入图片描述

2、生产环境操作类似操作(未开始,做到再加)
配置Vue3 + Vite + TypeScript环境中,可以按照以下步骤进行操作: 1. 创建项目:根据中的引用,您可以创建一个新的项目。 2. 路由配置修改:根据中的引用,您可以修改基础路由和路由守卫配置。 3. Pinia配置修改:根据中的引用,您可以修改Pinia配置。 4. 生产与开发环境配置:根据和中的引用,您可以创建.env.production和.env.development文件,并在其中配置相应的变量。 5. 其余小配置:根据中的引用,您可以进行其他小配置的修改,比如自启与Network的配置、自动引入组件和Vue方法的插件配置等。 具体操作步骤如下: 1. 在根目录下创建.env.production和.env.development文件,并在其中配置变量以VITE_开头,后面接变量名。例如,可以配置VITE_ENV来指定环境,VITE_APP_BASE_API来指定基地址等。 2. 根据需要,修改项目的路由配置,包括基础路由和路由守卫配置。 3. 根据需要,修改Pinia的配置。 4. 根据需要,进行其他小配置的修改,比如自启与Network的配置、自动引入组件和Vue方法的插件配置等。 请注意,这只是一个大致的操作指南,具体的配置过程可能会因项目需求而有所不同。建议您参考相关文档和教程,以确保正确配置您的Vue3 + Vite + TypeScript项目的环境。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [关于vue3+vite+ts项目搭建配置](https://blog.csdn.net/qq_58061710/article/details/129497444)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口](https://download.csdn.net/download/qq_42425561/85103234)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值