vue3+ts+vite读取静态资源图片和环境变量

vue3是通过import.meta.env获取环境变量的
vue2是通过process.env获取环境变量的
先在tsconfig下配置"types": ["vite/client"],
我们在App.vue打印出我们的环境变量 
<script  setup  lang='ts'>
  console.log(import.meta.env, "import.meta.env.VITE_BASE_PORT");
  import.meta.env[BASE_URL]='111'//尽量不要动态修改在生产环境下会有问题生产环境使用硬编码做转换的没法动态修改
  //尽量写把值死在.env.development的变量里等
</script>

注意我们在写环境变量的时候需要VITE开头 才能够被识别

我们的运行命令dev指的就是 dev本地的环境变量 build默认指的是线上的环境变量 不需要自己额外进行指定的

 "scripts": {
    "dev": "vite",
    "build": "tsc --noEmit  && vite build",
    "preview": "vite preview"
  },

自己自定义的环境变量的时候需要自己指定
比如我们自己新建了一个环境那么需要自己指定运行(指定为运行环境dev)

在package.json中进行修改

"scripts": {
    "dev": "vite --mode test",//运行cnpm  run  dev的时候 指定的环境变量是.env.test文件下的变量
    "build": "tsc --noEmit  && vite build",
    "preview": "vite preview"
  },

vite.config.ts读取import.env

import {  loadEnv } from "vite";
export default ({ mode }: any) => {
  console.log(mode,'mode') //development
  console.log(loadEnv(mode,process.cwd()),'cwd')
    // {
  //   VITE_USER_NODE_ENV: 'production',
  //   VITE_BASE_URL: 'https://5c5d75f/ceshi',
  //   VITE_BASE_PORT: '/api',
  //   VITE_MOCK: 'true'
  // }cwd
  return defineConfig({
    plugins: [vue()],
    resolve: {
      // 配置路径别名
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    
  });
};
 

在 ts文件想使用env的环境变量(axios.ts)
需要在tsconfig.json文件下添加属性 添加该属性还可以引入静态资源图片

"types": ["vite/client"],

axios.ts使用方式1

import  axios  from  'axios' 
const baseurl=   import.meta.env.VITE_api_URL 
const  server=axios.create({
    baseURL:baseurl
})

axios.ts使用方式2

import {  loadEnv } from "vite";
export default ({ mode }: any) => { 
  return defineConfig({
    define: {
      'process.env': loadEnv(mode, process.cwd())
    },
    plugins: [vue()],
    resolve: {
      // 配置路径别名
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    
  });
};

如果报错的话 进行安装cnpm i --save-dev @types/node

安装好之后在tsconfig.json的types字段添加node

axios.ts文件使用

import  axios  from  'axios'  
const {
    VITE_api_URL
  } = process.env 
const  server=axios.create({
    baseURL: VITE_api_URL
})