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

目录

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

1、在webpack.base.conf.js配置文件中给路径起别名

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中使用@

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

2.2、在dom中使用别名（~）

  
  
  
首页

3、修改了vue的配置文件，要重新npm run dev

页面正常访问，图片能够正常显示

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