vite学习

vite不需要全局安装（若需要全局安装：npm install -g create-vite-app）
pnpm create vite (第一步：选择项目名称 第二步：框架  第三步：Cutomize with create-vue)
或者
yarn create vite (第一步：选择项目名称 第二步：框架  第三步：Cutomize with create-vue)
或者
npm init vue@latest


安装less
pnpm install less less-loader -D

vite.config.ts中配置less和network
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 配置network
  server: {
    host:'0.0.0.0'
  },
  // less配置
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      }
    }
  }
})

配置env
// 在与src同目录下新建.env.production 和 .env.development
.env.production文件：
# 生产环境
NODE_ENV = 'production'
VITE_TITLE = '哈哈哈'

.env.development：
# 开发环境
NODE_ENV = 'development'
VITE_TITLE = '哈哈哈'

注意：只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码;上述代码只有VITE_TITLE暴露出来。
在项目中使用：import.meta.env.VITE_TITLE

npm run build --report  打包结束后在控制台输出包大小并显示打包时长

// package.json文件中配置命令
  "scripts": {
    "dev": "vite", // 开发环境
    "dev:pro": "vite --mode production", // 访问线上环境
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
     // 其他命令
  },