用vue-cli搭建好vue项目之后,进入正式开发过程,有时候会发现各种import路径中都存在长串的重复路径,比如:

import 'src/assets/styles/reset.css'
import 'src/assets/styles/border.css'

为了方便维护,可以打开build文件下的webpack.base.conf.js文件,在module.exports中找到resolve字段,在其中为重复路径设置一个足以表意的别名:

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

这里'styles'字段就是我设置的别名,以后在项目中引用路径含有'src/assets/styles'的文件,只需如下:

import 'styles/reset.css'
import 'styles/border.css'

Logo

前往低代码交流专区

更多推荐