vue-cli 别名配置 alias

vue-cli2

配置

build/webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'), // 配置路径别名 @/components/HelloWorld
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
      'views': resolve('src/views')
    }
  },

使用

如果不是使用 import 导入的话 可以加上 ~

<img src="~assets/img/f.png" alt="">
<img src="@/assets/img/f.png" alt="">

vue-cli3

配置

vue.config.js

module.exports = {
 	configureWebpack:{ // 配置webpack
        resolve:{
            // extensions:[], // 后缀名省略配置
            alias:{
                // '@': resolve('./src')  默认配置了

                'common':'@/common',
                'assets':'@/assets',
                'components':'@/components',
                'network':'@/network',
                'views':'@/views'

            }
        }
    }
}

<img src="assets/img/f.png" alt="">