写个工具助 vue-cli 迁移到 vite前言 我之前把 vue-cli 项目往 vite 迁移，因为 vite 中引

前言

我之前把 vue-cli 项目往 vite 迁移，因为 vite 中引入 vue 文件需要完整的路径，require 引入静态资源这种方式不支持，后面都是自己手动改的，工作量也比较大，改完之后发现自己傻傻的，还不如写个脚本处理。

然后就写了个小工具，后面大家往 vite 迁移的时候，也就不用在这个方面浪费时间了。

vite-fix-syntax

install

npm i vite-fix-syntax -g

目前特性：

1. require 语法转换
2. import 引入 vue 文件的路径补全

效果

同步语法

// 转换前
import demo from '@/components/demo'

// 转换后（文件真实路径，.vue || /index.vue）
// import demo from '@/components/demo/index.vue'
import demo from '@/components/demo.vue'

异步语法

// 转换前
const demo = () => import('@/components/demo')

// 转换后（文件真实路径，.vue || /index.vue）
// const demo = () => import('@/components/demo/index.vue')
const demo = () => import('@/components/demo.vue')

引入资源

// 转换前
const svg = require('@/assets/name.svg')

// 转换后
import name from '@/assets/name.svg' // 提升至顶层

const svg = name

install

npm i vite-fix-syntax -g

options

• fixAll

  • Type: boolean
  • Default: false
  • Desc: 是否执行所有修复命令

• fixPath

  • Type: boolean
  • Default: false
  • Desc: 是否补全路径

• fixRequire

  • Type: boolean
  • Default: false
  • Desc: 是否修复 require 语法

• config

  • Type: string
  • Default: syntax-replace.js
  • Desc: 配置文件名

config

• alias

  • Type: object
  • Default: {}
  • Description: 项目中自定义的别名，需要根据他来推测真实路径

• globOptions

  • Type: object
  • Default: { patterns: 'src/**/*.{js,jsx,vue}', options: { ignore: ['node_modules'], onlyFiles: true } }
  • Description: 匹配文件选项，基于fast-glob
  • Link: fast-glob

示例

const path = require('path')

module.exports = {
  alias: {
    '@': path.resolve('src')
  },
  globOptions: {
    patterns: 'src/**/*.{js,jsx,vue}',
    options: { ignore: ['**/a.js'] }
  }
}

example

修复路径

// 进入项目根目录
cd my-project

vite-fix-syntax --fixPath

修复 require

cd my-project

vite-fix-syntax --fixRequire

全部修复

cd my-project

vite-fix-syntax --fixAll

指定自定义配置文件

cd my-project

vite-fix-syntax --fixAll --config my-syntax-replace.js

最后

大家有什么问题可以给我提 issue，或者有什么建议往里加的功能也可以和我说，再者有其他迁移方面的问题，也可以交流交流。