轻松搞定，手把手教你将Vue-cli4项目升级到Vite

前端

2023-09-08 07:31:58

从Vue-cli4升级到Vite并不难，但如果没有充分的准备，也很容易踩坑。本文将分享我的升级经验，希望能帮助你少走弯路。

升级准备

在升级之前，你需要先确认你的项目是否满足以下条件：

项目是使用Vue-cli4创建的。
项目的Node.js版本是12或以上。
项目使用了Babel和Webpack。
项目没有使用任何不兼容Vite的插件。

如果你的项目满足以上条件，那么就可以开始升级了。

升级步骤

安装Vite

首先，你需要安装Vite。你可以使用以下命令安装：

npm install -g @vitejs/cli

创建Vite项目

创建一个新的Vite项目，并将其作为你的Vue项目的新根目录。你可以使用以下命令创建Vite项目：

vite create vite-project

迁移项目文件

将你的Vue项目文件从旧的根目录复制到新的根目录。

修改package.json

你需要修改package.json文件，以使用Vite作为你的项目构建工具。你可以将以下代码添加到package.json文件中：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.0",
    "vite": "^2.0.0"
  }
}

修改main.js

你需要修改main.js文件，以使用Vite来创建Vue应用程序。你可以将以下代码添加到main.js文件中：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

修改App.vue

你需要修改App.vue文件，以使用Vite来引入样式表和脚本。你可以将以下代码添加到App.vue文件中：

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const msg = ref('Hello Vite!')
    return {
      msg
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>