likes
comments
collection
share

Vue2+Vant2从Vue-cli4迁移到Vite2的实践自从尤大发布vite以后，就一直在关注，vite2的爆炸启动

作者站长头像
站长
· 阅读数 14

自从尤大发布vite以后，就一直在关注，vite2的爆炸启动速度，不论是开发体验还是构建打包都更好。在一些新的项目实践过之后，体会到了vite2的快感，就打算把一个大约30+模块的移动端vue2项目从vue-cli4迁移到vite2。

Vue2+Vant2从Vue-cli4迁移到Vite2的实践自从尤大发布vite以后，就一直在关注，vite2的爆炸启动

需要说明的是，webpack5也是一个很好的方案，并不建议大家草率的迁移到vite2。webpack又不是不能用:D

迁移成果

vue2+vant2的项目，从vue-cli4迁移到vite2之后：

  • 项目启动时间从76871ms减少到647ms，提升了118倍。
  • 项目打包时间从98s减少到33s，提升了3倍。
  • 项目打包后的体积也大幅减少。

vue-cli vs vite 启动时间 Vue2+Vant2从Vue-cli4迁移到Vite2的实践自从尤大发布vite以后，就一直在关注，vite2的爆炸启动

vue-cli vs vite 打包时间 Vue2+Vant2从Vue-cli4迁移到Vite2的实践自从尤大发布vite以后，就一直在关注，vite2的爆炸启动

话不多说，以下就是从vue-cli到vite的迁移步骤：

step1

打开项目，安装vite和vite-plugin-vue2

yarn add -D vite vite-plugin-vue2

step2

根据vite要求，把index.html和favicon.ico文件从public目录移到根目录，和package.json一个目录。

step3

修改index.html文件，新增引入main.js。

<head>
    <link rel="icon" href="/favicon.ico" />
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
</body>

注意：需要把favicon部分的<%= BASE_URL %>删除，会报错。

// 报错
// /node_modules/vite/dist/node/chunks/dep-1be34a63.js:65248
// let url = decodeURI(removeTimestampQuery(req.url)).replace(NULL_BYTE_PLACEHOLDER, '\0');
// ^
// URIError: URI malformed
// at decodeURI (<anonymous>)

step4

修改babel.config.js，删除vant2的babel-plugin-import按需引入的配置。

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};

step5

找到vant2的配置文件，新增引入vant样式文件。

import "vant/lib/index.less";

或者，直接在main.js引入。

这一步，根据不同的vant2的配置方式，略有差异。 我们的项目是通过新增plugins/vant.js集中管理，用less自定义主题。

step6

在src/assets/目录下，新增vant2主题配置文件theme.less。

这一步主要是根据项目需求配置vant2自定义主题。没有自定义主题的，可忽略。

step7

根目录新增vite.config.js文件，和package.json一个目录，根据自己的项目修改配置。

import { createVuePlugin } from "vite-plugin-vue2";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [createVuePlugin()],
  resolve: {
    extensions: [".js", ".vue"], // 必须
    alias: [ // 必须
      {
        find: "@",
        replacement: "/src"
      },
      {
        find: /^~/,
        replacement: ""
      }
    ]
  },
  css: { // 可选
    preprocessorOptions: {
      less: { // 自定义less配置，注意路径不能写错
        modifyVars: {
          hack: `true; @import "@/assets/theme.less";`
        }
      }
    }
  }
});

如果有路径报错，需要在alias里新增配置。

vite的具体配置，查看vite官方文档。

step8

package.json新增命令

"script": { 
    "start": "vite", 
    "prod": "vite build"
}

以上，执行启动命令，享受快感吧 :D

yarn start

// 项目目录
/dist
/node_modules
/src
  |-assets/
      |-theme.less
  |-components/
  |-plugins/
  |-router/
  |-services/
  |-store/
  |-utils/
  |-views/
  |-App.vue
  |-main.js
/-babel.config.js
/-favicon.ico
/-index.html
/-package.json
/-vite.config.js
/...
转载自:https://juejin.cn/post/7004638823237812255
评论
请登录