vue3使用别名报错问题的解决办法(vetur插件报错问题)

 更新时间:2022年07月15日 15:58:56   作者:谁扔的炮仗啊  
最近在写一个购物网站使用vue,使用中遇到了问题,下面这篇文章主要给大家介绍了关于vue3使用别名报错问题的解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

解决vue3使用别名报错问题:

在vue-cli3以上,创建vue3工程以及使用typescript中,会自动配置好别名。

见于项目根路径下的 tsconfig.json

"baseUrl": ".",
"paths": {
      "@/*": [
        "src/*"
      ]
    }
"include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ]

首先是您的路径正确的问题下,如果使用了 vetur 插件,一直报别名路径找不到的问题

因此可以直接在 vetur 插件的配置中修改配置

打开设置,找到 vetur 插件

设置

找到 setting.json 配置

setting.json配置

setting.json 中加上 “vetur.validation.script”: false

即可解决 vetur 报错问题

在这个项目中并不需要添加 vue.config.js 文件

附:vue中的别名设置

对于3.0+的Vue,新建vue.config.js。

const path = require('path')
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                '#': resolve('src'),
            }
        }
    },
}

在我们的路由文件中,就可以写成

import Login from '#/views/Login.vue'

再例如我们把src/views目录的别名设置为views

const path = require('path')
 
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                '#': resolve('src'),
                'views':resolve('src/views'),
            }
        }
    },
 
}
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from 'views/Login.vue'

备注:自建的vue.config.js和默认配置合并成最终的配置。

总结

到此这篇关于vue3使用别名报错问题解决的文章就介绍到这了,更多相关vue3使用别名报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue parseHTML函数源码解析 AST预备知识

    vue parseHTML函数源码解析 AST预备知识

    这篇文章主要为大家介绍了vue parseHTML函数源码解析 AST预备知识示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue.js每天必学之构造器与生命周期

    Vue.js每天必学之构造器与生命周期

    Vue.js每天必学之构造器与生命周期,告诉大家什么是Vue.js构造器与生命周期,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 在vue中使用v-bind:class的选项卡方法

    在vue中使用v-bind:class的选项卡方法

    今天小编就为大家分享一篇在vue中使用v-bind:class的选项卡方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue的缓存方法示例详解

    Vue的缓存方法示例详解

    这篇文章主要给大家介绍了关于Vue缓存方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue-router钩子执行顺序示例解析

    vue-router钩子执行顺序示例解析

    这篇文章主要为大家介绍了vue-router钩子执行顺序示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 超实用vue中组件间通信的6种方式(最新推荐)

    超实用vue中组件间通信的6种方式(最新推荐)

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的,这篇文章主要介绍了vue中组件间通信的6种方式,需要的朋友可以参考下
    2022-11-11
  • 详解Vue、element-ui、axios实现省市区三级联动

    详解Vue、element-ui、axios实现省市区三级联动

    这篇文章主要介绍了Vue、element-ui、axios实现省市区三级联动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 如何利用vue3实现放大镜效果实例详解

    如何利用vue3实现放大镜效果实例详解

    最近有项目需要用到对图片进行局部放大,类似淘宝商品页的放大镜效果,经过一番研究功能可用,下面这篇文章主要给大家介绍了关于如何利用vue3实现放大镜效果的相关资料,需要的朋友可以参考下
    2021-09-09
  • Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

    Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

    这篇文章主要介绍了Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK ),非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • Vue3中页面跳转方式总结

    Vue3中页面跳转方式总结

    Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,它提供了多种方法来实现页面之间的导航,本文将详细介绍 Vue 3 中的各种页面跳转方式,有需要的小伙伴可以参考一下
    2024-12-12

最新评论