webpack中关于路径别名

最新推荐文章于 2024-09-14 23:13:50 发布

snewartt

最新推荐文章于 2024-09-14 23:13:50 发布

阅读量988

点赞数

本文链接：https://blog.csdn.net/snewartt/article/details/106534965

版权

起路径别名：
对于vue-cli2中，在webpack-config-js中

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'), 
      'assets': '@/assets'  //别名
    }
  },

对于vue-cli脚手架版本大于等于3中，在vue.config.js中

  `module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'components': '@/components',
        'content': 'components/content',
        'common': 'components/common',
        'assets': '@/assets',
        'network': '@/network', 
        'views': '@/views',
      }
    }
  }
}`

路径别名可以使用在import语法中，如样式文件的引入@import("@/xyz/") 或 import xx from “@/xyz/” 或组件按需加载() => import(‘views/profile/Profile’)
注意在标签元素中或者在style中使用别用，如img标签中src引入时加波浪号使用，如
<img slot="item-icon" src="~assets/image/yourpic.png" alt="">