VUE3 项目开发实战入门系列 （3.-添加别名）

添加别名

​ 考虑到在Vue2中我们通常喜欢使用@符号来代替src目录，这里我们也来修改vite的配置加上这个别名。

章节内容：

1. 添加别名

添加别名

修改vite配置文件 vite.config.js

import { resolve } from 'path';

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

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [vue()],
	resolve: {
        // 添加别名
		alias: {
			'@': resolve(__dirname, 'src'),
		}
	}
})

配置修改完毕后就可以在项目使用@符号来访问src目录啦，比如刚才添加的路由配置文件。

src/router/router.config.js

import Index from "@/views/index.vue";

export const routes = [

    // 首页
    {
        path: "/",
        name: "index",
        component: Index,
        meta: {}
    },
    {
        path: "/login",
        name: "login",
        component: () => import("@/views/Login.vue")
    }
]

查看代码：

git clone https://github.com/chitucode/ctcode-vue3.git (已下载可直接checkout)
git checkout v3.0 

好友微信号

添加大佬微信 和上千同伴一起提升技术交流生活

hsian_

最后

码字不容易 你的点击关注点赞留言就是我最好的驱动力