【无标题】

最新推荐文章于 2024-10-27 11:25:22 发布

m0_51353579

最新推荐文章于 2024-10-27 11:25:22 发布

阅读量164

点赞数

分类专栏： Vue vue-cli4 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_51353579/article/details/122269095

版权

Vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue-cli4

4 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue3项目中通过创建vue.configure.js文件配置webpack的resolve模块，设置组件、资产等文件的别名，并展示了在template和script中正确使用别名的方法。

摘要由CSDN通过智能技术生成

Vue3别名使用
1.在整个项目下创建文件vue.configure.js

module.exports = {
  configureWebpack : {
    resolve:{
      alias:{
      //@表示src目录，默认已经配好了
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views'
      }
    }
  }
}

使用
（1）在template中使用，需要加~
(2) 在script标签中使用，不用加~

<img src="~assets/img/tabbar/home.svg" alt="">

<script>
  import tabbar from 'components/common/tabbar/TabBar'
  import tabbaritem from 'components/common/tabbar/TabBarItem'

  export default {
    name: "maintabbar",
    components: {
      tabbar,
      tabbaritem
    }
  }
</script>