锐客网

  1. 首页 > 睿知 > it技术 > >

vue中给路径起别名的实现方法

目录

  • 1、在webpack.base.conf.js配置文件中给路径起别名
  • 2、在vue文件中使用别名
    • 2.1、在import中使用@
    • 2.2、在dom中使用别名（~）
  • 3、修改了vue的配置文件，要重新npmrundev

    1、在webpack.base.conf.js配置文件中给路径起别名 vue中给路径起别名的实现方法
    文章图片

    resolve: {extensions: ['.js', '.vue', '.json'],alias: {'@': resolve('src'),'assets': resolve('src/assets'),'components': resolve('src/components'),'views': resolve('src/views'),}},


    2、在vue文件中使用别名
    2.1、在import中使用@
    vue中给路径起别名的实现方法
    文章图片

    /* 1、导入T组件 */import TabBar from '@/components/tabbar/TabBar'import TabBarItem from '@/components/tabbar/TabBarItem'


    2.2、在dom中使用别名（~）
    vue中给路径起别名的实现方法
    文章图片

    vue中给路径起别名的实现方法
    文章图片
    vue中给路径起别名的实现方法
    文章图片
    首页


    3、修改了vue的配置文件，要重新npm run dev 【vue中给路径起别名的实现方法】页面正常访问，图片能够正常显示
    vue中给路径起别名的实现方法
    文章图片

    到此这篇关于vue中给路径起别名的实现方法的文章就介绍到这了,更多相关vue 路径起别名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

      推荐阅读


      上一篇：C#实现FTP上传文件的方法

      下一篇：vue实现移动滑块验证