【Vue工程】004-配置环境变量、端口、代理、打包等

一、配置环境变量

1、说明

.env所有环境生效.env.development开发环境配置 .env.production生产环境配置

**官方文档 **环境变量和模式 https://cn.vitejs.dev/guide/env-and-mode.html

2、定义变量

以 VITE_ 为前缀定义变量

VITE_BASE_URL = 'http//localhost:8080/api'

3、定义变量 ts 类型

修改 src/vite-env.d.ts

/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_BASE_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

4、使用变量

import.meta.env.VITE_BASE_URL

二、环境变量配置案例

1、开发环境 .env.development

# 页面标题
VITE_APP_TITLE = 页面标题(development)
# 接口请求地址会设置到 axios 的 baseURL 参数上
VITE_APP_API_BASEURL = /
# 调试工具可设置 eruda 或 vconsole如果不需要开启则留空
VITE_APP_DEBUG_TOOL =

# 是否开启代理
VITE_OPEN_PROXY = true

2、测试环境 .env.test

NODE_ENV = production

# 页面标题
VITE_APP_TITLE = 页面标题(test)
# 接口请求地址会设置到 axios 的 baseURL 参数上
VITE_APP_API_BASEURL = /
# 调试工具可设置 eruda 或 vconsole如果不需要开启则留空
VITE_APP_DEBUG_TOOL =

# 是否在打包时启用 Mock
VITE_BUILD_MOCK = true
# 是否在打包时生成 sourcemap
VITE_BUILD_SOURCEMAP = true
# 是否在打包时开启压缩支持 gzip 和 brotli
VITE_BUILD_COMPRESS =

3、生产环境 .env.production

NODE_ENV = production

# 页面标题
VITE_APP_TITLE = 页面标题
# 接口请求地址会设置到 axios 的 baseURL 参数上
VITE_APP_API_BASEURL = /
# 调试工具可设置 eruda 或 vconsole如果不需要开启则留空
VITE_APP_DEBUG_TOOL =

# 是否在打包时启用 Mock
VITE_BUILD_MOCK = false
# 是否在打包时生成 sourcemap
VITE_BUILD_SOURCEMAP = false
# 是否在打包时开启压缩支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip,brotli

三、配置端口与代理

export default defineConfig({
    ...
    server: {
        host: '0.0.0.0',
        port: 8080, 
        open: true,
        https: false,
        proxy: {
            '/api': {
                target: '要代理的地址',
                changeOrigin: true,
                ws: true,
                rewrite: (path: string) => path.replace(/^\/api/, ''),
            },
        },
    },
});

四、打包配置

修改vite.config.ts

1、分包

通过() => import()形式加载的组件会自动分包第三方插件需手动分包

build: {
    rollupOptions: {
        output: {
            manualChunks: {
                vue: ['vue', 'pinia', 'vue-router'],
                    elementIcons: ['@element-plus/icons-vue'],
            },
        },
    },
},

2、生成.gz文件

安装

pnpm add vite-plugin-compression -D

修改vite.config.ts

默认情况下插件在开发 (serve) 和生产 (build) 模式中都会调用使用 apply 属性指明它们仅在 ‘build’ 或 ‘serve’ 模式时调用

这里打包生成 .gz 插件仅需在打包时使用

import viteCompression from 'vite-plugin-compression'

plugins: [
    //...
    {
        ...viteCompression(),
        apply: 'build',
    },
],

3、js 和 css 文件夹分离

export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                chunkFileNames: "static/js/[name]-[hash].js",
                entryFileNames: "static/js/[name]-[hash].js",
                assetFileNames: "static/[ext]/[name]-[hash].[ext]",
            },
        },
    },
});

五、vite与 webpack 使用区别

1、静态资源处理

webpack使用require处理

vite使用 new URL(url, import.meta.url).href 处理

import.meta.url 包含了对于目前 ES 模块的绝对路径

new URL(url [, base]) 构造函数返回一个新创建的 URL 对象如果url 是相对 URL则会将 base 用作基准 URL。如果 url 是绝对 URL则无论参数base是否存在都将被忽略

new URL('../assets/images/home.png', import.meta.url).href

// 在src/constants/menus.ts下引入图片
// import.meta.url返回 http://localhost:8080/src/constants/menus.ts

// new URL(...).href返回
// http://localhost:8080/src/assets/images/home.png

2、组件自动化注册

webpack

<script>
const path = require('path');
//读取@/components/BaseEchartsModel下所有.vue文件
const files = require.context('@/components/BaseEchartsModel', false, /\.vue$/);
const modules = {};
files.keys().forEach((key) => {
  const name = path.basename(key, '.vue');
  modules[name] = files(key).default || files(key);
});
export default {
  name: 'BaseEcharts',
  components: modules,
};
</script>

vite

<script setup lang="ts">
//读取@/components/BaseEchartsModel下所有.vue文件
import.meta.glob('@/components/BaseEchartsModel/*.vue');
</script>