vite开发vue3小结

1、正常按照vite的安装教程进行安装，成功运行项目
2、这时候就是一个空项目，需要加入一些其他的补充：vuex\vue-router\axios
store.ts配置：

import {createStore} from 'vuex'

export default createStore({
    state: {
        loginState:{
            name: '',
            isLogin: false
        },
    },
    mutations: {

    },
    actions: {

    },
})

router.ts:

 import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router';
 const routes:Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'home',
     component: () => import("@/components/Index.vue"),
     alias: '/home',
     //这是路由别名
     meta: {
       title: '首页'
     }
   }
 ];
 
 const router = createRouter({
   history: createWebHashHistory(),
   routes
 });
 export default router;

3、进行到这个时候，突然发现@对于vue3是不识别的，需要配置路径别名-alias：
vite.config.ts

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

// const path = require("path")  初次引入的失败代码
import { resolve } from 'path'
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, "./src")
    }
  }
})

刚开始我是按照网上的教程直接引入path通过path.resolve进行别名设置，但是：
path模块是node.js内置的功能，但是node.js本身并不支持typescript，所以直接在typescript项目里使用是不行的
所以按需引入：cnpm i @types/node
但是出现了这个错误：

排查：vite不支持持commonJS所以必须把代码换成 import形式
所以最后：

import { resolve } from 'path'

也就是刚才展示的vite.config.ts
成功更改别名！！！