vite+vue2

安装和修改

1. 把create创建vue的src整个复制粘贴到基于vite对的项目中
2. 把create创建的package.js中的

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },

3. 复制粘贴到vite的项目中

• yarn 安装依赖包
• yarn dev 启动修改错误
• yarn add @vue/compiler-sfc
• yarn add vite-plugin-vue2 -D https://www.npmjs.com/package/vite-plugin-vue2
• 在vite.config.js配置

import { defineConfig } from 'vite'
// import vue from '@vitejs/plugin-vue'

import { createVuePlugin } from 'vite-plugin-vue2'

// https://vitejs.dev/config/
export default {
  plugins: [
    createVuePlugin(/* options */)
  ],
}

• yarn add vue-template-compiler

启动页面显示不出来就，修改路由和页面中的路径啦

import HelloWorld from '../components/HelloWorld.vue'

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: '/',
  routes,
})

export default router

在vite项目中的package.js完整代码

{
  "name": "vite_vue2_test1",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vue/compiler-sfc": "^3.2.33",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vue-template-compiler": "^2.6.14"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "vite": "^2.9.9",
    "vite-plugin-vue2": "^2.0.0"
  }
}