vue为自定义路径设置别名的方法

 更新时间:2021年11月29日 15:04:34   作者:秋田君  
这篇文章介绍了vue为自定义路径设置别名的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

Vue中如何配置自定义路径别名

在我们日常开发中,常常会导入一些模块或者组件,如果采用相对路径的方式:

import uEditor from "../../../../../components/tools";

会显得臃肿,多余,如果引用稍有差错就会出现-404的报错,不优雅,还会经常出现404错误,如果文件有变,还需要一个一个文件找到改路径进行重新修改,十分麻烦,vue cli3以上的版本在node_modules中提供了文件别名功能。但是还是建议没有特别要求少改一点node_modules的代码。

创建vue.config.js,写入配置代码

module.exports = {
    configureWebpack: {
        resolve: {
            alias: { //配置别名,修改后需要重新编译才能生效
                'assets': '@/assets',
                'common': '@/common',
                'components': '@/components',
                'network': '@/network',
                'views': '@/views',
            }
        }
    }
}

如下图:

注意:如果在HTML路径中使用别名,需要在引用前面加上"~"前缀。

其他文件中引用:

以上所述是小编给大家介绍的vue为自定义路径设置别名的方法,希望对大家有所帮助。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue给组件传递不同的值方法

    vue给组件传递不同的值方法

    今天小编就为大家分享一篇vue给组件传递不同的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue 组件之间传值的主要方法

    Vue 组件之间传值的主要方法

    父组件向子组件传值,使用 props:可以通过在子组件上绑定 props,然后在父组件中通过 v-bind 绑定相应的数据来传递数据,这篇文章主要介绍了Vue 组件之间传值的方法,需要的朋友可以参考下
    2023-12-12
  • 详解在vue-cli3.0中自定css、js和图片的打包路径

    详解在vue-cli3.0中自定css、js和图片的打包路径

    这篇文章主要介绍了详解在vue-cli3.0中自定css、js和图片的打包路径,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue2中如何更改el-dialog出场动画(el-dialog弹窗组件)

    vue2中如何更改el-dialog出场动画(el-dialog弹窗组件)

    el-dialog是一个十分好用的弹窗组件,但是出场动画比较单调,于是决定自定义一个出场动画,本文通过实例代码图文相结合给大家叙述下实现思路,感兴趣的朋友一起看看吧
    2022-06-06
  • vue或react项目生产环境去掉console.log的操作

    vue或react项目生产环境去掉console.log的操作

    这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • VUE项目中调用高德地图的全流程讲解

    VUE项目中调用高德地图的全流程讲解

    这篇文章主要介绍了VUE项目中调用高德地图的全流程讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue项目中安装依赖npm install一直报错的解决过程

    Vue项目中安装依赖npm install一直报错的解决过程

    这篇文章主要给大家介绍了关于Vue项目中安装依赖npm install一直报错的解决过程,要解决NPM安装依赖报错,首先要分析出错误的原因,文中将解决的过程介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • 浅谈vue.js导入css库(elementUi)的方法

    浅谈vue.js导入css库(elementUi)的方法

    下面小编就为大家分享一篇浅谈vue.js导入css库(elementUi)的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 前端XSS攻击场景详解与Vue.js处理XSS的方法(vue-xss)

    前端XSS攻击场景详解与Vue.js处理XSS的方法(vue-xss)

    这篇文章主要给大家介绍了关于前端XSS攻击场景与Vue.js使用vue-xss处理XSS的方法,介绍了实际工作中渲染数据时遇到XSS攻击时的防范措施,以及解决方案,需要的朋友可以参考下
    2024-02-02
  • 详解Vue中公共组件的封装

    详解Vue中公共组件的封装

    在Vue中,组件是构建用户界面的基本单位,封装公共组件是一种良好的实践,可以提高代码的可复用性和可维护性,下面我们就来看看如何封装一个公共的按钮组件吧
    2023-08-08

最新评论