Vue3's vite creates h5 project 1 (create vite project, configure IP access project, configure multiple environment variables and preview packaging production effect, configure alias)

vue3's vite creates h5 project 1

01: Create a vite project

npm init vue@3

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vite-vue3-h5-tmp

✔ Add TypeScript? …  Yes

✔ Add JSX Support? …  Yes

✔ Add Vue Router for Single Page Application development? …  Yes

✔ Add Pinia for state management? …  Yes

✔ Add Cypress for testing? …   No

✔ Add ESLint for code quality? …  Yes

✔ Add Prettier for code formatting? …  Yes

• Initialize project modules
  

02: Configure IP access project vite.config.ts

export default defineConfig({
    
    
  plugins: [vue(), vueJsx()],
  server: {
    
    
    host: '0.0.0.0'
  }
})

03: Configure multiple environment variables

• Add environment variable files, each file is written to the configuration, and VITE_ must be added in front of the definition of env environment variables
• dev environment
• test environment
• prod environment
• Create in the project root directory

.env.development
.env.test
.env.production

03-1: Configure the dev environment of multiple environment variables.env.development

# must start with VITE_ 设置dev开发的模式 
VITE_ENV = 'development'
# 设置dev输出路径
VITE_OUTPUT_DIR = 'dev'
# 设置dev开发的公共路径
VITE_PUBLIC_PATH = /

# dev开启mock接口
VITE_USE_MOCK = true

03-2: Configure the test environment of multiple environment variables.env.test

VITE_ENV = 'test'
VITE_OUTPUT_DIR = 'dist_test'
VITE_PUBLIC_PATH = /

VITE_USE_MOCK = true

VITE_BUILD_COMPRESS = 'none'

VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false

03-3: Configure the prod environment of multiple environment variables.env.production

VITE_ENV = 'production'
# 生产环境 打包后为存放在dist目录下
VITE_OUTPUT_DIR = 'dist'

VITE_PUBLIC_PATH = /

# Whether to open mock
VITE_USE_MOCK = true

# 是否启用gzip或brotli压缩
# 可选: gzip | brotli | none
# 如果需要多个表单，可以使用“，”分隔
VITE_BUILD_COMPRESS = 'none'

# 使用压缩时是否删除原始文件，默认为false
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false

03-4 Modify scripts command package.json

  "scripts": {
    
    
    "dev": "vite --mode development",
    "test": "vite --mode test",
    "prod": "vite --mode production",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
  },

03-5 App view

<template>
  <div>App</div>
</template>

<script setup lang="ts" name='App'>
import {
    
     } from 'vue'
console.log("meta.env", import.meta.env)
</script>

<style  lang="scss" scoped>
</style>

03-6 Access the meta.env environment in the project

03-6-1 Operation

03-6-2 Running dev environment effectpnpm dev

• Run dev environment effectspnpm dev
  • 

03-6-3 Run the test environment effectpnpm test

• Run the test environment effectpnpm test

• 

03-6-4 Run prod environment effectpnpm prod

• Run prod environment effects -pnpm prod
  • 

03-6-5 Run build environment effectpnpm build 与 pnpm preview

• View packaging effectpnpm build
  • pnpm previewView the preview effect after packaging
  • 

03-7 typescript intelligent prompt root directory / env.d.ts

/// <reference types="vite/client" />
interface ImportMetaEnv extends Readonly<Record<string, string>> {
    
    
	readonly VITE_ENV: string; // 环境
	readonly VITE_OUTPUT_DIR: string; // 打包目录
	readonly VITE_PUBLIC_PATH: string; //公共路径
  }
  interface ImportMeta {
    
    
	readonly env: ImportMetaEnv;
  }

04: Configure aliases

04-1 vite.config.ts

import {
    
     fileURLToPath, URL } from 'node:url'

import {
    
     defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
    
    
  resolve: {
    
    
    alias: {
    
    
      '@': fileURLToPath(new URL('./src', import.meta.url)),
	  '@com': fileURLToPath(new URL('./src/components', import.meta.url))
    }
  },
})

Use the alias App.vue

• Use the Test component under src/components

import Test from "@com/Test.vue"