脚手架

1.webpack

2.vite

npm create vite@latest

2.1 配置文件

• 默认指定：vite.config.js
• 自定义指定：vite --config 自定义名称.js

2.2 vite 命令

--host [host]// 指定域名
--port <port>// 指定端口
--https // 使用 TLS+HTTP/2
--cors // 可以跨域
--open [path] // 启动自动打开服务器
--stictPort // 如果指定端口被使用退出程序
--force // 强制Vite重新执行预构建，忽视缓存
--config | -c<file> // 指定vite的配置文件
--base path // 指定url读取文件基本路径
--clearScreen // 日志记录时，是否清屏
--logLevel | -l <level> // 指定日志等级：error|info|silent|warn
--debug | -d<feat>// 获取调试日志
--filter | -f <filter> // 过滤调试日志
--mode | -m <mode> // 设置env模式
--help | -h // 获取vite帮助信息
--version | -v // 获取vite版本信息

信息

什么时候需要使用–force？

Vite 缓存分为两部分：

文件系统缓存：Vite 会将预构建的依赖缓存到 node_modules/.vite，package.json 的 dependencies 字段和依赖 lock 文件，或者 vite.config 中相关字段配置过的，这些文件发生变化，vite 就会重新构建，强制执行可以通过--force 或手动删除.vite 目录。

浏览器缓存：解析后的依赖请求会以 http 头 max-age=max-age=31536000,immutable 强缓存，提高开发页面重载性能。

vite [root]// 启动以配置文件root为入口的项目开发环境
vite serve // 启动以配置文件root为入口的项目开发环境
vite build [root] // 打包以配置文件root为入口的文件为生产环境文件
vite optimize [root] // 预构建生产环境
vite preview [root] // 构建一个本地预览静态生产环境

"dev": "vite --open",
"serve": "vite serve",
"build": "vue-tsc --noEmit&& vite build",
"staging": "vue-tsc && vite build --mode development",
"preview": "vue-tsc && vite preview",

2.3 配置环境模式

默认环境:当pageage.json中的script字段里的命令执行了vite serve或 vite，vite 默认是开发环境（development），当执行了 vite build 命令，vite 默认环境为生产环境（production）。注意地，当执行地是vite preview命令，vite 默认环境也是生产环境，因为这个命令主要是创建一个能在本地执行的生产环境。JavaScript 模块有一个暴露特定上下文元数据属性的对象（import.meta），这个对象包含了当前模块的信息，对象里有三个属性：env（环境变量）、resolve、url（当前模块加载路径），因为在main.ts打印的信息，所以这里获取的路径是src/main.ts。

// main.ts
console.log(import.meta);

其中的 env 环境变量默认也有 5 个属性：BASE_URL（url 公共路径）、DEV（是开发模式）、PROD（是否生产模式）、mode（环境模式）、SSR（是否服务器渲染）。当项目还配置有自定义环境变量时，env 环境中自定义变量也会带上的。

注意：如果自定义环境变量前缀必须为VITE_因为 vite 配置文件中的 envPrefix 属性值默认为 VITE_。如果想改变成自定义，在配置文件中必须配置 envPrefix。

自定义环境：通过创建相应模式的文件。文件名格式如下：

.env// 所有模式都会加载
.env.local // 所有模式都会加载，但会被git忽略
.env.[mode].local // 只有特定模式会加载，但会被git忽略
.env.[mode] // 只有指定模式会加载，注意.env.production优先级比.env高

置指定环境模式：通过在 vite.config.js 文件中的基本配置中的 mode 属性指定，在这里指定会覆盖掉 vite serve 、vite build 中的默认 mode 模式，注意地，这个 vite preview 中 mode 不会被覆盖，还有如果在命令中指定 mode，比如 vite serve --mode production，这样也不会被配置文件中地 mode 覆盖，也就是命令行指定 mode 优先级最高。

2.4 配置 css

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    modules: {
      localsConvention: "camelCaseOnly",
      scopeBehaviour: "local",
      generateScopedName: "[name]_[local]_[hash:5]",
      hashPrefix: "",
      globalModulePaths: [],
    },
    postcss: { plugins: [postcssPreset()] },
    preprocessorOptions: {
      less: { additionalData: '@import "./src/common/styles/index.less";' },
    },
    devSourcemap: true, // 开发过程中是否启用css sourcemap
  },
});

2.5 vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx' //tsx插件引入
import AutoImport from 'unplugin-auto-import/vite' //自动引入ref,reactive等等等
// 配置antd-v按需加载
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
// import path from 'path';
import { resolve, join } from 'path'
import { wrapperEnv } from './build/utils'

// defineConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  console.log(command, mode, '===')
  const root = process.cwd()
  const env = loadEnv(mode, root) // 环境变量对象
  console.log('环境变量------', env)
  console.log('文件路径（ process.cwd()）------', root)
  console.log('文件路径（dirname）------', __dirname + '/src')
  const { VITE_DROP_CONSOLE } = wrapperEnv(env)

  // // dev 独有配置
  return {
    root, //项目根目录（index.html 文件所在的位置） 默认： process.cwd()
    base: '/', //  开发或生产环境服务的公共基础路径：默认'/'   1、绝对 URL 路径名： /foo/；  2、完整的 URL： https://foo.com/； 3、空字符串或 ./（用于开发环境）
    publicDir: resolve(__dirname, './dist'), //默认'public'  作为静态资源服务的文件夹  (打包public文件夹会没有，里面得东西会直接编译在dist文件下)
    assetsInclude: resolve(__dirname, './src/assets'), // 静态资源处理

    // ******插件配置******
    plugins: [
      vue(),
      vueJsx(),
      AutoImport({
        imports: [
          'vue',
          'vue-router',
          'pinia',
          {
            axios: [
              ['default', 'axios'] // import { default as axios } from 'axios',
            ]
          }
        ],
        dts: 'types/auto-import.d.ts' //生成全局引入的文件
      }),
      Components({
        resolvers: [
          AntDesignVueResolver({
            importStyle: 'less' //修改antdv主题色
          })
        ]
      })
    ], //配置插件
    // ******开发服务器配置******
    server: {
      https: true, //(使用https)启用 TLS + HTTP/2。注意：当 server.proxy 选项 也被使用时，将会仅使用 TLS
      host: true, // 监听所有地址
      port: 8080, //指定开发服务器端口：默认3000
      open: true, //启动时自动在浏览器中打开
      cors: false, //为开发服务器配置 CORS
      proxy: {
        //配置自定义代理规则
        // 字符串简写写法
        '/jpi': 'http://192.168.1.97:4567',
        '/api': {
          target: 'http://192.168.1.97:108',
          changeOrigin: true, //是否跨域
          rewrite: path => path.replace(/^\/api/, '')
        }
      }
      // hmr: {
      //   overlay: false
      // }
    },
    // ******项目构建配置******
    build: {
      target: 'modules', //设置最终构建的浏览器兼容目标  //es2015(编译成es5) | modules
      outDir: 'dist', // 构建得包名  默认：dist
      assetsDir: 'assets', // 静态资源得存放路径文件名  assets
      sourcemap: false, //构建后是否生成 source map 文件
      brotliSize: false, // 启用/禁用 brotli 压缩大小报告。 禁用该功能可能会提高大型项目的构建性能
      minify: 'esbuild', // 项目压缩 :boolean | 'terser' | 'esbuild'
      chunkSizeWarningLimit: 1000, //chunk 大小警告的限制（以 kbs 为单位）默认：500
      cssTarget: 'chrome61' //防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式  (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
    },
    // ******resolver配置******
    resolve: {
      alias: {
        // 别名配置
        // 键必须以斜线开始和结束
        '@': resolve(__dirname, 'src'),
        components: resolve(__dirname, './src/components'),
        assets: resolve(__dirname, './src/assets'),
        '#': resolve(__dirname, 'types'),
        build: resolve(__dirname, 'build')
      }
    },
    // ******打印+debugger清除配置******
    // 测试环境保留打印
    esbuild: {
      pure: VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : []
    },

    css: {
      // 全局变量+全局引入less+配置antdv主题色
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          // 全局变量使用：@primary-color
          modifyVars: {
            'primary-color': '#1890ff', // 全局主色
            'link-color': ' #1890ff', // 链接色
            'success-color': ' #52c41a', // 成功色
            'warning-color': ' #faad14', // 警告色
            'error-color': ' #f5222d', // 错误色
            'font-size-base': ' 14px', // 主字号
            'heading-color': ' rgba(0, 0, 0, 0.85)', // 标题色
            'text-color': ' rgba(0, 0, 0, 0.65)', // 主文本色
            'text-color-secondary': ' rgba(0, 0, 0, 0.45)', // 次文本色
            'disabled-color': ' rgba(0, 0, 0, 0.25)', // 失效色
            'border-radius-base': ' 2px', // 组件/浮层圆角
            'border-color-base': ' #d9d9d9', // 边框色
            'box-shadow-base': ' 0 2px 8px rgba(0, 0, 0, 0.15)' // 浮层阴影
          }
        }
      }
    }
  }
})