vite构建vue3.0项目踩坑

构建一个新项目

npm install -g create-vite-app
create-vite-app my-vue3-vite
cd my-vue3-vite
npm install
npm run dev

启动之后：

image.png

css预处理器需要放在package.json的devDependencies中；

  "devDependencies": {
    "less": "^3.12.2",
    "less-loader": "^7.0.1",
    "vite": "^1.0.0-rc.1",
    "@vue/compiler-sfc": "^3.0.0-rc.1"
  }

路由配置，新建一个文件夹router，新建index.js文件

image.png

index.js文件内容

import {
    createRouter,
    createWebHistory
} from 'vue-router'
import Login from '../page/index.vue'

const routerHistory = createWebHistory()


const router = createRouter({
    history: routerHistory,
    routes: [{
        path: '',
        name: 'login',
        component: Login
    }],
})

export default router