vue-cli4转vite2踩坑记录

仅总结记录,还是贴个官方文档地址,毕竟不会还是优先找官方文档的。 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 ...替代

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注