给vue配置路径别名@

使用vite构建的项目

在vite.config.js中进行别名的配置

javascript 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})
//这样,你就可以使用@作为别名来引用/src目录下的文件。

如果你已经正确配置了别名,但仍然无法使用@别名,可能是由于编辑器的配置问题。有些编辑器(如VS Code)需要额外的配置才能正确识别别名。你可以尝试在项目根目录下创建一个jsconfig.json文件,并添加以下内容:

javascript 复制代码
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
//这样,编辑器就能正确识别@别名

使用webpack构建的项目

第一步:在vue.config.js中引入path

javascript 复制代码
const path = require('path');

如果引入path的报错的话可能时缺少依赖

javascript 复制代码
yarn add @types/node --dev

使用 webpack 构建的项目在配置路径别名时通常需要引入 path 模块,因为 webpack 的配置文件中需要使用 path.resolve() 方法来处理路径。

第二步:在vue.config.js中配置别名

javascript 复制代码
const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

在这个配置中,我们使用了 path.resolve() 方法来获取项目根目录下的 src 目录的绝对路径,并将其设置为路径别名 @。这样一来,在项目中就可以使用 @ 来代表 src 目录。

相关推荐
程序员码歌29 分钟前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康1 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海2 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏2 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码2 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby3 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹3 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel3 小时前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh3 小时前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富3 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js