Vue 框架学习(七) webpack

Webpack配置地狱

先留下参考视频：https://www.bilibili.com/video/BV15741177Eh?p=75

 

1、导入省略和别名设置

webpack.base.conf.js

vueCil2:

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

vueCil3:

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

在template中加~:<img slot="item-icon" src="~assets/img/tabbar/home.png" />

再script中不用加:import TabBar from "components/tabbar/TabBar";