Vue项目中如何配置src文件下的@别名
作者：前端进阶中
这篇文章主要介绍了Vue项目中如何配置src文件下的@别名问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue项目配置src文件下@别名
方法一：
在实际项目中，我们通常可以将src目录设置为@目录，这样引入文件时候可以一目了然而且使用起来非常方便，可以提高我们的开发效率。
[@代表的是src文件夹,这样将来文件过多，找的时候也方便，而且也还有提示]
本文介绍如何在实际项目中使用@作为src目录的别名：
1.Webpack+JavaScript项目
在项目新建vue.config.js,编辑vue.config.js内容如下：
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': resolve('src')
}
}
}
}新建jsconfig.json，内容如下:(@在node_moules和dist文件中不能使用)
方法一：
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}2.Vite+TypeScript项目
编辑vite.config.ts内容如下：
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import { resolve } from 'path'
export default defineConfig({
resolve: {
alias: {
'@': resolve(__dirname, 'src') // 路径别名
},
extensions: ['.js', '.json', '.ts', '.vue'] // 使用路径别名时想要省略的后缀名，可以自己 增减
}
})编辑tsconfig.json，内容如下：
Vue src路径别名@的配置
在开发项目的时候文件与文件关系可能很复杂，因此我们需要给 src 文件夹配置一个别名。
// vite.config.tsimport {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src") // 相对路径别名配置，使用 @ 代替 src
}
}
})// ts 编译配置
// tsconfig.json
{
"compilerOptions": {
"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
"paths": { //路径映射，相对于baseUrl
"@/*": ["src/*"]
}
}
}或者：
// vite.config.js
import {fileURLToPath, URL} from 'node:url'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})// ts 编译配置
// tsconfig.json
{
"compilerOptions": {
"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
"paths": { //路径映射，相对于baseUrl
"@/*": ["src/*"]
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。