不同环境加载不同配置

  1. 安装依赖

    1
    npm install --save-dev dotenv

  2. 创建环境文件 创建文件 .env.production 和 .env.development。配置名以 VITE_ 开头，可以被读到

    1
    VITE_API_URL=https://api.example.com

  3. 配置 Vite 修改 vite.config.js 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    import { defineConfig } from 'vite';
    import vue from '@vitejs/plugin-vue';
    import dotenv from 'dotenv';

    export default defineConfig(({ mode }) => {
      dotenv.config({ path: `.env.${mode}` });

      return {
        plugins: [vue()],
        define: {
          'process.env': process.env
        }
      };
    });

  4. 读取配置

    1
    const apiUrl = import.meta.env.VITE_API_URL;

设置cdn

  1. 在环境变量 .env.production .env.development 里配置 CDN URL

    1
    VITE_CDN_URL=https://cdn.example.com/

  2. 在 vite.config.js 里配置 CDN URL

    1
    2
    3
    4
    5
    6
    7
    8
    // vite.config.js
    import { defineConfig } from 'vite';
    import vue from '@vitejs/plugin-vue';

    export default defineConfig({
      plugins: [vue()],
      base: process.env.VITE_CDN_URL,
    });

  3. 配置框架cdn 安装插件

    1
    npm install vite-plugin-cdn-import --save-dev

  4. 配置 vite.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    import { defineConfig } from 'vite';
    import vue from '@vitejs/plugin-vue';
    import cdnImport from 'vite-plugin-cdn-import';

    export default defineConfig({
      plugins: [
        vue(),
        cdnImport({
          modules: [
              {
                name: 'vue',
                var: 'Vue',
                path: 'https://cdn.jsdelivr.net/npm/vue@3.3.0/dist/vue.global.prod.js',
              },
          ],
        }),
      ],
    });

参考：
配置 Vite