vue3 配置@根路径

介绍

在 vue3里：配置@根路径，替代 ../src/....；方便后续引入的时候，通过@根路径方便定位，简易代码。

解决方式

1. 安装一下path： npm install path
2. 在 vue.config.js 文件中添加配置

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    base:'',
    publicDir: path.resolve(__dirname,'./dist'),
    assetsInclude: path.resolve(__dirname, './src/assets'),
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@/assets': path.resolve(__dirname, './src/assets'),
      '@/views': path.resolve(__dirname, './src/views'),
    },
  },
})

3. 重启项目，然后就可以在页面需要使用的位置，进行使用即可。