vite 环境变量配置

在根目录新建.dev.production和.env.development文件

NODE_ENV = 'development'
VITE_APP_BASE_API = /developmentApi 
NODE_ENV = 'production'
VITE_APP_BASE_API = /productionApi 
VITE_APP_BASE_URL = /index/

在vue文件需要使用的地方

console.log(import.meta.env.VITE_APP_BASE_API)

vite.config.ts

import path from "path";
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default ({ mode }) => {
  //参数mode为开放模式或生产模式
  const env=loadEnv(mode, process.cwd());   // 获取.env文件里定义的环境变量
  
  return defineConfig({
    plugins: [vue()],

    resolve: {
      alias: {
        //别名配置
        "@": path.resolve(__dirname, "src"), 
        "@comp": path.resolve(__dirname, "src/components"),
      },
    },
    server: {
      proxy: {
        "/api": {
          target: env.VITE_APP_API,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
    //项目部署在主域名的子文件使用,例如http://localhost:3000/myvite/。不填默认就是/
    base: env.VITE_APP_BASE_URL || '/',
  })
}

打包后放在nginx--html--index目录下面

router.ts

const base_url = import.meta.env.BASE_URL; //获取vite.config.js配置的base,默认是根目录/
const router = createRouter({
  history: createWebHistory(base_url),
  routes,
});

  • 6
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值