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


文章目录

  • 【Vue工程】004-配置环境变量、端口、代理、打包等
  • 一、配置环境变量
  • 1、说明
  • 2、定义变量
  • 3、定义变量 ts 类型
  • 4、使用变量
  • 二、环境变量配置案例
  • 1、开发环境 `.env.development`
  • 2、测试环境 `.env.test`
  • 3、生产环境 `.env.production`
  • 三、配置端口与代理
  • 四、打包配置
  • 1、分包
  • 2、生成.gz文件
  • 安装
  • 修改vite.config.ts
  • 3、js 和 css 文件夹分离
  • 五、vite与 webpack 使用区别
  • 1、静态资源处理
  • 2、组件自动化注册
  • webpack
  • vite


一、配置环境变量

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>