Vue中配置@作为src根路径

最新推荐文章于 2023-06-06 10:09:34 发布
最新推荐文章于 2023-06-06 10:09:34 发布
阅读量359 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengxiayu/article/details/129942868
版权

在跟src同级的

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    // 配置@/
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

根路径下找到jsconfig.json中作如下配置：

配置方法二在在项目根目录的vue.config.js

 

dengxiayu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue.config.js中配置Vue的路径别名的方法
11-20
在官方的vue-cli配置参考中存在一个configureWebpack webpack中有一个配置路径别名的属性 const path = require('path') module.exports = { // 对象和函数都可以，如果要控制开发环境可以选择函数 configureWebpack:{ resolve:{ alias:{ 'assets':path.resolve('./src/assets') } } }
Vue项目设置路径src目录别名为@
jonssonyan
01-24 5372
在实际项目中，我们通常可以将src目录设置为@目录，这样引入文件时候可以一目了然而且使用起来非常方便，可以提高我们的开发效率。 本文介绍如何在实际项目中使用@作为src目录的别名， 如果你使用的编程语言为JavaScript 如果你使用的编程语言为TypeScript ...
vue3中配置@为根目录
qq_54601164的博客
06-02 1165
4、注意：如果你使用的是ts,他会检测不到__dirname,这时你还应该在tsconfig.ts文件中进行配置，5、下载配置代码的依赖，安装@types/node。2、在vite.config.ts 中引入。3、在配置文件中添加。
vue中引入路径@的用法及说明
风不冷的博客
06-06 3571
【代码】vue中引入路径@的用法及说明。
vue--配置根目录(用@代表src目录)
IT利刃出鞘的博客
06-25 7802
本文介绍vue如何配置根目录（用@代表src目录）。
常用配置src路径别名@（含ts项目、craco）
VCLife
07-10 868
本文章用于解决ts项目配置路径别名的问题
vue配置@根目录
厚渡
08-20 1万+
vue-配置-@根目录 在日常开发中， 我们导入文件写的是相对位置， 和绝对位置 但是有些人可能知道@/store 是什么意思， 但是自己启动一个自己的vue项目却发现不可以？？！！ 什么情况？ 这是玄学吗？！ 不！ 不是的 许多新手 可能不知道 vue.config.js 的vue配置文件， 这个文件得自己创建的 将如下代码复制到 vue.config.js 就可以在页面中 使用 @/api 就等于 绝对路径中的 根目录的/api // vue.config.js const path = requi
Vue项目中怎么配置在src文件下@别名
shi15926lei的博客
11-26 2318
vue中怎么配置在src文件下@别名,详细方法
vue项目中@/src路径跳转配置
zmx781284440的博客
03-12 995
在vscode中安装Vue Jumper这个插件，可支持。(ctrl+鼠标左键点击组件名)
vue中添加mp3音频文件的方法
01-19
有的时候我们需要在vue中添加音频文件，但是直接将音频文件放置了assets目录下的时候，会发现并不能正常播放，下面是两种常用的配置方法： 方法一、将音频文件放置在static目录中，然后进行调用，如下所示 <audio class=success src=/static/audios/do_wrong.mp3> </audio> 以上这种方式就能够解决这个问题了。 方法二、给项目配置mp3格式的解析器 1、在webpack.base.conf.js中添加加载器，如下 { test: /\.(mp3)(\?.*)?$/, loader: 'url-loade
基于vue项目设置resolves.alias: @路径并适配webstorm
01-21
在webpack的配置项中添加下面代码 function resolve (dir) { return path.join(__dirname, dir) } webpackConfig = { resolve: { alias: { '@': resolve('src') } } } 然后再设置一下下，在你的IDE中按住CTRL就能根据路径跳转到对应文件了 描述： ctrl+alt+s 搜索 webpack 然后选择\node_modules\@vue\cli-service\webpack.config.js 文件 点击 OK
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
01-21
1.在vue项目根目录下新建vue.config.js（不是在src下面） vue.config.js配置文件： module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https://vuejs.org/v2/guide/installation.html#Runtim
Vue实现base64编码图片间的切换功能
12-13
前言 昨天在项目开发中遇到了一个需要展示多张图片到一个容器中的需求，每张图片在鼠标移入时都要更换图片路径，展示一个新的图片，由于每张图片大小都在2~6kb之间，webpack中配置了图片在10kb以内自动转换base64，所有就有了本篇文章的分享。先给大家展示下最后要实现的效果 实现思路 给每个元素添加@mouserover事件和@mouseleave事件 绑定函数，传用于识别当前参数的标识 根据所传参数判断当前状态下应该显示什么图片 解析渲染 实现过程 从json文件中读取图片信息集合，循环渲染json文件中的图片，传当前元素和当前图片的一些信息过去 <div class="
Vue配置根目录@（引用路径）
明日复明日的博客
08-12 5323
首先：@是在路径访问时使用的，为了减少层级引用。 @这是webpack设置的路径别名，默认指向src。 旧版本在build/webpack.base.conf这个文件里面定义。 新版本在根目录下创建在vue.config.js定义。 const path = require('path') const resolve = dir => path.join(__dirname, dir) module.exports = { baseUrl: './', runtimeCompile
项目准备-配置路径别名（配置@指向src）
留着鼻涕敲代码
11-28 1455
在代码中，就可以通过 @ 来表示 src 目录的绝对路径 1. 安装修改 CRA 配置的包 npm i -D @craco/craco 2. 配置文件 在项目根目录中创建 craco 的配置文件：craco.config.js，并在配置文件中配置路径别名 const path = require('path') module.exports = { // webpack 配置 webpack: { // 配置别名 alias: { // 约定：使用 @ 表示 sr
vue项目中配置 @，即@就是src目录
weixin_52063946的博客
02-07 1398
vue项目中配置 @，即@就是src目录
如何在vue项目中配置引用路径“@”
热门推荐
m0_60692814的博客
09-11 1万+
配置引用路径（以@引用为项目的src目录为例）可拆分为如下两步操作 配置webpack打包时将@解析为项目的src目录 配置vsCode在路径中输入@时的路径提示 本贴着重讲解“配置webpack打包时将@解析为项目的src目录”的操作和溯源 操作 在项目根目录的vue.config.js文件中做如下配置 const path = require('path') module.exports = { configureWebpack: { resolve: {
vue配置src为@（根目录）
weixin_44161385的博客
03-03 1049
在vue.config.js（初始生成文件名为babel.config.js）中增加代码（ chainWebpack: config => { config.resolve.alias .set(’@’, resolve(‘src’)) } ）： const path = require('path') const resolve = dir => path.join(__dirname, dir) module.exports = { baseUrl: './', runti
vue3 vite 配置@绝对路径
最新发布
09-09
在Vue 3中，使用Vite作为构建工具可以配置@绝对路径。在Vite的配置文件中，可以通过设置"alias"选项来配置@的绝对路径。 具体步骤如下： 1. 打开Vite配置文件，一般是`vite.config.js`。 2. 在配置文件中找到`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值