【2024年4月】vue-cli项目升级为vite+pnpm记录，8个步骤完美解决先说一下项目背景，本项目是前人创建，使

先说一下项目背景，本项目是前人创建，使用的 vue-cli 创建，使用的技术栈是 Vue3 + js + ant-design-vue + element-plus + vuex + pinia + Sass + Less ，很奇葩是不是。

既然用了vue3，那当然要使用vite+pnpm，（前人已离）于是我接手项目之后，果断整改，不喜欢折腾的程序员不是好将军。

整个过程分成 8 步，如下：

• 通用配置文件整理
• npm --> pnpm
• 引入 vite
• ant-design-vue 和 element-plus 去掉一个
• 移除 process.env.xxx 和 require 等不支持语法
• /deep/ 和 ::v-deep 语法替换， 正则替换为 :deep()
• defineProps 等宏，移除显示引入
• Sass + Less 去掉一个

接下来我们开始吧~

一、通用配置文件整理

通用配置文件整理，几乎是我的每个项目都会整的，包括以下几个文件：

• 1. .vscode/settings.json

{
  // 设置缩进空格数为2
  "editor.tabSize": 2,

  // 指定在保存文件时触发的代码操作的行为
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },

  // 配置在保存文件时是否自动格式化代码
  "editor.formatOnSave": true,

  // 配置默认的代码格式化器
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 指定了在编辑器中打开 .ignore 文件时使用的默认格式化程序
  "[ignore]": {
    "editor.defaultFormatter": "foxundermoon.shell-format"
  },

  // 控制是否忽略差异编辑器中的空格变化
  "diffEditor.ignoreTrimWhitespace": false,
  
  "[properties]": {
    "editor.defaultFormatter": "foxundermoon.shell-format"
  },
  "[dockerfile]": {
    "editor.defaultFormatter": "ms-azuretools.vscode-docker"
  }
}

如果项目成员没有设置自己的 文件格式化配置 ，那这样就差不多可以了。如果项目成员有自己的 文件格式化配置 那就得在项目层面进行配置，用以覆盖用户全局的配置，就是在上面配置文件的基础上，增加几行代码，如下：

{
  // ... 其他配置
  // 下面是新增的
  
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

这样就统一使用 esbenp.prettier-vscode 格式化代码，从此以后大家都一样的风格。

• 1. prettier 配置 prettier支持多种格式的配置文件，.prettierrc ,.prettierrc.js 是我最喜欢用的2种，一个是 json 格式，一个是 js 格式。

以 .prettierrc 为例，我通常会这样配置 prettier:

{
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "semi": false,
  "trailingComma": "all",
  "htmlWhitespaceSensitivity": "ignore"
}

• 1. .npmrc 配置

# 淘宝源
registry=https://registry.npmmirror.com/

# sass_binary 源也使用淘宝源
# sass_binary_site=http://npm.taobao.org/mirrors/node-sass/  旧的，已经不能用了
sass_binary_site=https://registry.npmmirror.com/binary.html?path=node-sass/

# pnpm 需要这个配置
shamefully-hoist=true

上面就简单设置了 3 个配置， 2 个是淘宝源，一个是为了使用 pnpm.

二、npm --> pnpm

有了上面 .npmrc 的配置，这一步几乎不用任何处理，只需要把文档里面的 npm 全部改用为 pnpm 即可，同时 pnpm 命令可以省略 run，如：

- npm run install
+ pnpm i

- npm run dev
+ pnpm dev

三、引入 vite

使用 vite 生成一个vue3+js 的新项目，然后把 index.html、src/main.js、 package.json 和 vite.config.js 搬过来。

index.html、src/main.js 都是最初始的，vite.config.js 加了点油和辣椒，保证与旧的 vue.config.js 起到相同作用。

import { defineConfig } from 'vite';
import path from 'node:path';
import dayjs from 'dayjs';
import vue from '@vitejs/plugin-vue';
import Unocss from 'unocss/vite';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
import { visualizer } from 'rollup-plugin-visualizer';

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    vue(),
    Unocss(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
      // 指定 symbolId 格式
      symbolId: 'icon-[dir]-[name]',
    }),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
    }),
    visualizer({
      open: true,
      filename: './node_modules/.cache/visualizer/stats.html',
    }),
  ],
  resolve: {
    extensions: ['.vue', '.js', '.json', '.jsx'],
    alias: {
      '@': path.join(process.cwd(), './src'),
      // 下面的照搬原有配置
      '@assets': path.join(process.cwd(), './src/assets'),
      '@components': path.join(process.cwd(), './src/components'),
      '@api': path.join(process.cwd(), './src/api'),
      '@utils': path.join(process.cwd(), './src/utils'),
      '@store': path.join(process.cwd(), './src/store'),
      '@router': path.join(process.cwd(), './src/router'),
      '@pages': path.join(process.cwd(), './src/pages'),
      '@static': path.join(process.cwd(), './src/static'),
    },
  },
  
});

如上，额外加了我最爱的 unocss 和 visualizer。

下面是原本的 vue.config.js 的主要配置文件：

顺便还解决后缀识别问题：extensions: ['.vue', '.js', '.json', '.jsx'],。原有的代码基本没有加后缀，如果不加这个配置的话会报错。

package.json 只有最初始的 vite 项目的依赖，现在还需要把旧项目需要用的安装过来。最后，因为项目 type 由 commonjs 变成了 module, 一些配置文件后缀需要由 .js 改为 .cjs 后缀。

四、ant-design-vue 和 element-plus 去掉一个

经过我的搜索，发现 element-plus 只用到了几个 message 相关的API，果断替换为 ant-design-vue，然后移除 element-plus 依赖。

import { ElMessage } from 'element-plus';
ElMessage.success(props.label + '复制成功');

// 改为如下这样的
import { message } from 'ant-design-vue';
message.success(props.label + '复制成功');

import { ElMessageBox } from 'element-plus';

function handleClose(done) {
  ElMessageBox.confirm('去订单详情页', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
    .then(() => {
      toDetail();
      done();
    })
    .catch(() => {
      // catch error
    });
}

// 改为如下这样的
import { message } from 'ant-design-vue';

function handleClose(done) {
  message.confirm('去订单详情页', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
    .then(() => {
      toDetail();
      done();
    })
    .catch(() => {
      // catch error
    });
}

其实就是 ElMessage --> message， ElMessageBox --> message 就完了。完全可以使用字符串替换。

接着把 element-plus 相关的代码和依赖去掉就行。

五、移除 process.env.xxx 和 require 等不支持语法

首先把 process.env.xxx 替换为 import.meta.env.xx，并把其他环境变量由 VUE_xxx 替换为 VITE_xxx 。

接着去掉 require 语法，组件引入全部通过 ()=>import('xxx') 方式引入，如下图：

六、/deep/ 和 ::v-deep 语法替换， 正则替换为 :deep()

全局替换，开启正则表达式，如下图：

~ 把查找的输入框填入正则表达式：/deep/([^{]*)\{，要替换的输入框填入 :deep($1) { 即可，轻松简单~

替换的结果，如下，如此丝滑，比涂完面膜的小仙女都丝滑~~

七、defineProps 等宏，移除显示引入

前人只是前人，不是古人，古人没那么笨的。这些 defineProps 、defineEmits 宏是不需要引入的，控制台还一堆 warning，干扰我的视线。

秉着 有问题就解决问题，没有问题就创造问题 的精神，现在有问题了，我们就来解决一下吧。

首先分析一下需要怎么处理，经过我发现有 4 种情况：

• 引入的宏在最右边：import { onMounted, ref, defineProps } from 'vue';
• 引入的宏在中间：import { onMounted, defineProps, reactive, ref, computed } from 'vue';
• 引入的宏在最左边：import { defineProps, reactive, ref, computed } from 'vue';
• 引入的宏是独苗：import { defineProps } from 'vue';

理清了所有情况，那就好办了，直接字符串替换就行，正则都不需要。

处理方式，以 defineProps 为例，defineEmits 类似。

• 第1种，最右边，defineProps } 替换为 } 即可。
• 第2种，在中间，defineProps, 替换为 `` 即可。
• 第3种，最左边，{ defineProps 替换为 { 即可。
• 第4种，独苗， 经过上面几步处理完，独苗就只剩下 import { } from 'vue';， 最后统一删除就行。

八、Sass + Less 去掉一个

因为我发现文件里面没有用到 Sass 变量，也没有 Less变量，所以直接全局替换就行。

这里直接 lang="less" --> lang="scss"，就可以了。

到此，全部完结。

总结

本文描写了 vue-cli 项目升级为 vite+pnpm 的过程，大致分为以下 8 个步骤：

• 通用配置文件整理
• npm --> pnpm
• 引入 vite
• ant-design-vue 和 element-plus 去掉一个
• 移除 process.env.xxx 和 require 等不支持语法
• /deep/ 和 ::v-deep 语法替换， 正则替换为 :deep()
• defineProps 等宏，移除显示引入
• Sass + Less 去掉一个

真实的项目升级过程还会有其他需要处理的，比升级后 css calc 语法识别问题，切换环境地址优化处理，antdv 按需加载，lodash 改为 lodash-es等。

其中比较通用的知识就是 正则替换，项目中有没有类似需要替换的，可以试试练练手~~

全文完~