仅总结记录，还是贴个官方文档地址，毕竟不会还是优先找官方文档的。 cn.vitejs.dev

Q:为什么要换vite
A:在机械硬盘敲过项目就懂了

创建项目

npm init @vitejs/app

SCSS LESS 等 CSS预处理器的安装

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus

vite配置

vite的配置不依赖于vue.config.js，而是依赖于vite.config.js，创建项目时会自动生成

配置跨域代理

export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567/foo',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      }
    }
  }
})

配置别名

import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    }
  }
}

环境变量

调用变量

• vue-cli中调用使用 process.env.*
• vite中使用import.meta.env.*来调用
  

  vue-cli	vite
  process.env.NODE_ENV	import.meta.env.MODE

require() is not defined

vue-cli中require是node里的用法，vite中不存在require，统一使用import ... from ...替代