Vite配置别名

1.首先需要安装types/node

npm i @types/node -D

2.vite.config.jsj加入这些

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 配置别名 例如@src == ../src
      '@': resolve(__dirname, 'src'),
    },
    // 想要省略的后缀
    extensions: ['.js', '.json', '.ts'],
  },
});

然后安装路由

npm install vue-router@4

 在src下新建views文件夹,创建Home.vue,下面是示例

修改App.vue文件

<script setup lang="ts">
import { RouterView } from 'vue-router';
</script>

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped>
html,
body,
#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>

在src下新建router文件夹,目录下新建index.ts

import {
  createRouter,
  createWebHashHistory,
  RouterOptions,
  Router,
  RouteRecordRaw,
} from 'vue-router';
const routes: RouteRecordRaw[] = [
  { path: '/', name: 'Home', component: () => import('@/views/Home.vue') },
];

// RouterOptions是路由选项类型
const options: RouterOptions = {
  history: createWebHashHistory(),
  routes,
};

// Router是路由对象类型
const router: Router = createRouter(options);

export default router;

此时你会得到一个报错如图

解决方法:在vite-env.d.ts加上这些

/// <reference types="vite/client" />
declare module '*.vue' {
  import { ComponentOptions } from 'vue';
  const componentOptions: ComponentOptions;
  export default componentOptions;
}

 最后挂在到main.ts中

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import router from '@/router';

createApp(App).use(router).mount('#app');