vu2 使用 vite安装插件安装完毕修改vite.config.js文件修改Router中的base 创建根目录

安装

yarn add  vite vite-plugin-vue2 -D
//或者
npm i  vite vite-plugin-vue2 -D

插件安装完毕

修改vite.config.js文件

//vite.config.js

import { defineConfig } from "vite";
const { createVuePlugin } = require('vite-plugin-vue2')
import path from "path";
export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  base: "/",
  plugins: [
    // vue()
    createVuePlugin(),
  ],
});

修改Router中的base

const router = new VueRouter({
  mode: "history",
  // base: process.env.BASE_URL,//注释掉之前的这个
  base: import.meta.env.BASE_URL,//改为这个
  routes,
});

创建根目录下创建index.html

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
</head>
<body>
    <!-- 這兩個分是重要的 -->
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <!--到這裡  要确保  type="module" src="/src/main.js"  一个都不能少-->
</body>
</html>

再package.js添加vite启动项

  "scripts": {
    "dev": "vite", //添加这个
  },

完成！