全网最硬核的Ant

时间：2023-11-30 本站点击：1

一、前言

众所周知，Vite作为下一代前端开发与构建工具，就是一个字：快。并且Vite已经作为Vue3默认的构建工具。通过实验表明，项目迁移后，从Vue-cli的近2分钟，到Vite的5秒（项目大小不同，时间也不同），提升了几十倍甚至上百倍的速度。

本文针对老项目从Vue-cli迁移到Vite，提供了全网最全的方案。下面以ant-design-vue-pro为例进行迁移，ant-design-vue版本为1.7.8。

同时，提供了迁移后的仓库，欢迎Star~

GitHub - Seals-Studio/ant-design-vue-pro-vite

迁移前后对比（参考）

构建工具服务器启动耗时页面首次加载速度 (无缓存)第二次加载速度 (有缓存)热更新 HMR打包Webpack83s4.78s3.35s4.78s3mins 37sVite4.72s (第二次 0.72s)1.71s1.33s瞬间51.45s

二、删除package.json相关依赖

删除@vue和babel相关

{    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",    "@vue/cli-plugin-babel": "^4.5.17",    "@vue/cli-plugin-eslint": "^4.5.17",    "@vue/cli-plugin-router": "^4.5.17",    "@vue/cli-plugin-unit-jest": "^4.5.17",    "@vue/cli-plugin-vuex": "^4.5.17",    "@vue/cli-service": "^4.5.17",    "@vue/eslint-config-standard": "^4.0.0",    "@vue/test-utils": "^1.3.0",    "babel-eslint": "^10.1.0",    "babel-plugin-import": "^1.13.3",    "babel-plugin-transform-remove-console": "^6.9.4",}

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/ pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3 pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python6

删除loader（Webpack插件）和webpack

{    "file-loader": "^6.2.0",    "less-loader": "^5.0.0",    "vue-svg-icon-loader": "^2.1.1",    "git-revision-webpack-plugin": "^3.0.6",    "webpack-theme-color-replacer": "^1.3.26",}

删除babel.conf.js和jsconfig.json

安装pnpm工具

pnpm是快速的，节省磁盘空间的包管理工具

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python

三、安装最新版vite和vite-plugin-vue2

pnpm add vite vite-plugin-vue2 -D

四、在根目录下新建Vite.conf.js

import { defineConfig } from 'vite'// vue2的vite插件import { createVuePlugin } from 'vite-plugin-vue2'export default ({ mode }) => {  return defineConfig({    plugins: [      createVuePlugin({        jsx: true      })    ]  })})

五、index.html修改

移动public/index.html到代码根目录（和package.json同级）

在body标签中新增如下：

<!-- 指明加载main.js --><script type="module" src="/src/main.js"></script>

替换htmlWebpackPlugin插件注入的变量

htmlWebpackPlugin是webpack插件，所以不能再使用了，vite提供了vite-plugin-html插件来向index.html注入变量

   plugins: [      // ...      createHtmlPlugin({        minify: true,        inject: {          data: {            title: 'Ant Design Pro',            cdn: {              css: [],              js: [                    '//cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',                    '//cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js',                    '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',                    '//cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js'              ]            }          }        }      }),      // ...    ]

修改title

<title><%= title %></title>

修改css和js引入

    <!-- require cdn assets css -->    <% for (var i in cdn.css) { %>    <link rel="stylesheet" href="<%= cdn.css[i] %>" />    <% } %>    <!-- require cdn assets js -->    <% for (var i in cdn.js) { %>    <script type="text/javascript" src="<%= cdn.js[i] %>"></script>    <% } %>

修改index.html

安装vite-plugin-html

pnpm add vite-plugin-html -D

修改vite.config.js，添加配置

六、环境变量更换

出于安全考虑，vite只能识别以VITE_开头的环境变量了，原VUE_环境变量不生效了，同时，也不能使用process.env.xxx来读取环境变量了。需要修改vite.conf.js配置，手动添加process.env.xxx环境变量

修改vite.conf.js配置，添加环境变量

{    "file-loader": "^6.2.0",    "less-loader": "^5.0.0",    "vue-svg-icon-loader": "^2.1.1",    "git-revision-webpack-plugin": "^3.0.6",    "webpack-theme-color-replacer": "^1.3.26",}0

将所有开头的VUE_环境变量全部替换为VITE_

将所有的process.env.NODE_ENV更改为import.meta.env.MODE

将所有开头为process.env.全部更改为import.meta.env.

七、Ant-Design-Vue按需引入

安装vite-plugin-style-import插件

{    "file-loader": "^6.2.0",    "less-loader": "^5.0.0",    "vue-svg-icon-loader": "^2.1.1",    "git-revision-webpack-plugin": "^3.0.6",    "webpack-theme-color-replacer": "^1.3.26",}1

增加vite.conf.js配置

{    "file-loader": "^6.2.0",    "less-loader": "^5.0.0",    "vue-svg-icon-loader": "^2.1.1",    "git-revision-webpack-plugin": "^3.0.6",    "webpack-theme-color-replacer": "^1.3.26",}2

八、Ant-Design-Vue引入moment问题

原因是antdv底层引入采用：import * as moment from "moment";

未兼容ESM写法，参考 github issue: chore: v1 support vite

本文参考[]插件，写了一个vite插件，去修改antdv底层引入moment方式，改为：import moment from moment

安装依赖包

{    "file-loader": "^6.2.0",    "less-loader": "^5.0.0",    "vue-svg-icon-loader": "^2.1.1",    "git-revision-webpack-plugin": "^3.0.6",    "webpack-theme-color-replacer": "^1.3.26",}3

修改vite.conf.js配置

{    "file-loader": "^6.2.0",    "less-loader": "^5.0.0",    "vue-svg-icon-loader": "^2.1.1",    "git-revision-webpack-plugin": "^3.0.6",    "webpack-theme-color-replacer": "^1.3.26",}4

九、添加代理

安装path-browserify

{    "file-loader": "^6.2.0",    "less-loader": "^5.0.0",    "vue-svg-icon-loader": "^2.1.1",    "git-revision-webpack-plugin": "^3.0.6",    "webpack-theme-color-replacer": "^1.3.26",}5

添加vite.conf.js配置

{    "file-loader": "^6.2.0",    "less-loader": "^5.0.0",    "vue-svg-icon-loader": "^2.1.1",    "git-revision-webpack-plugin": "^3.0.6",    "webpack-theme-color-replacer": "^1.3.26",}6

十、package.json脚本命令修改

将脚本命令修改为如下：

{    "file-loader": "^6.2.0",    "less-loader": "^5.0.0",    "vue-svg-icon-loader": "^2.1.1",    "git-revision-webpack-plugin": "^3.0.6",    "webpack-theme-color-replacer": "^1.3.26",}7

十一、postcss配置

安装插件

{    "file-loader": "^6.2.0",    "less-loader": "^5.0.0",    "vue-svg-icon-loader": "^2.1.1",    "git-revision-webpack-plugin": "^3.0.6",    "webpack-theme-color-replacer": "^1.3.26",}8

十二、添加eslint插件

安装插件

{    "file-loader": "^6.2.0",    "less-loader": "^5.0.0",    "vue-svg-icon-loader": "^2.1.1",    "git-revision-webpack-plugin": "^3.0.6",    "webpack-theme-color-replacer": "^1.3.26",}9

添加vite.conf.js配置

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python0

十三、在写有jsx语法的文件中添加lang="jsx"

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python1

十四、添加@别名

修改vite.conf.js配置

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python2

十五、静态文件引入

动态组件引入

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python3

静态图片引入

直接import图片

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python4

采用import.meta.globEager

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python5

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python6

十六、其他

问题：fim.js依赖包引用问题

解决：删除viser-vue依赖包，可以改用官方G2的封装库@antv/g2plot

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python7

问题：ant-design-vue组件List引用问题，List.Item为undefined

解决一：替换代码

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python8

解决二：单独引用List.Item

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python9

迁移后项目地址：GitHub - Seals-Studio/ant-design-vue-pro-vite，欢迎Star~

原文：https://juejin.cn/post/7098850144245776420

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：/Vue/3764.html