Vite配置别名

最新推荐文章于 2025-05-09 16:59:56 发布

玩代码的菜鸟

最新推荐文章于 2025-05-09 16:59:56 发布

阅读量567

点赞数

CC 4.0 BY-SA版权

分类专栏： Vite 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/junhian/article/details/133187962

Vite 专栏收录该内容

2 篇文章

订阅专栏

博客介绍了Vue项目中路由的安装步骤，包括安装types/node、在src下新建views文件夹创建Home.vue、修改App.vue文件、在src下新建router文件夹并新建index.ts等，还提到安装过程中会出现报错，给出了在vite-env.d.ts添加内容的解决方法，最后要挂载到main.ts中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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');