Vue3从Vue CLI转Vite

最新推荐文章于 2024-04-11 15:34:19 发布

Carry灭霸

最新推荐文章于 2024-04-11 15:34:19 发布

阅读量601

点赞数 1

分类专栏：前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_43076923/article/details/133174583

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue CLI转Vite

背景

最近在做一个Vue3项目，然后每次写界面都需要import { ref } from 'vue'，我就感觉很多余，于是就查了一些资料，'unplugin-auto-import'支持自动导入配置，网上当时大部分配置都是Vite+Vue3，很少看到Vue3+Vue CLI，于是就跟着转了。

更新依赖

移除Vue CLI相关依赖

npm uninstall @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-vuex @vue/cli-service sass-loader core-js @babel/core @babel/eslint-parser

安装依赖

npm install @vitejs/plugin-vue" vite unplugin-auto-import --save-dev

删除babel.config.js文件，.eslintrc文件删除babel相关内容，升级eslint

npm update eslint@8 eslint-plugin-vue@8

更新文件

将vue.config.js改成vite.config.js
新增/修改内容

vite.config.js

import { defineConfig } from "vite"
import createVitePlugins from "./vite/plugins"
import path from "path"

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  return {
    plugins: createVitePlugins(),
    resolve: {
      // https://cn.vitejs.dev/config/#resolve-alias
      alias: {
        // 设置路径
        "~": path.resolve(__dirname, "./"),
        // 设置别名
        "@": path.resolve(__dirname, "./src")
      },
      // https://cn.vitejs.dev/config/#resolve-extensions
      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
    },
    // vite 相关配置
    server: {
      port: 5173,
      host: true,
      open: true,
      hmr: true
    },
    base: "/db-transfer/"
  }
})

vite/plugins/index.js

import vue from "@vitejs/plugin-vue"

import createAutoImport from "./auto-import"

export default function createVitePlugins() {
  const vitePlugins = [vue()]
  vitePlugins.push(createAutoImport())
  return vitePlugins
}

vite/plugins/auto-import.js

import autoImport from "unplugin-auto-import/vite"

export default function createAutoImport() {
  return autoImport({
    imports: ["vue", "vue-router"],
    dts: false
  })
}

移动index.html

Vite 的 index.html 文件放在项目的根目录，并且要做一些修改，修改完成后的内容如下

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>db-transfer</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but db-transfer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

更新脚本

修改package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
  }
}