vue中如何配置让引用文件不带路径？

Question

通常我们的项目会有很多共公用的js文件，在组件中引用的时候一般都是这样

import a from '../../mods/a.js'

这样一大串路径看这很繁琐。对于这种公用的文件，在引用的时候我想达到这样的效果

import a from 'a'

是需要在webpack中配置吗？

Answer 1

resolve了解一下
https://webpack.js.org/config...

我搭建的简易版 vue-cli 有涉及到该模板的应用
https://github.com/Xieguoiang...
注释很清晰 可以参考.

Answer 2

import  '@/routes/XXX';

@是src根目录，这个vue-cli的官方脚手架默认带的

Answer 3

自己 webpack 别名配一下 把常用的目录 components base api 什么的都写上去 接下来 import 从 components/xx/xx 开始就可以

Answer 4

如果你使用webpack的话，可以这样：

modules.exports = {
    ...
    resolve: {
        alias: {
          '@mod': resolve('../../mod'),
        }
    }
    ...
}

Answer 5

一帮都会将你的mods配置为别名,

module.exports = {
  +++
  resolve: {
    alias: {
      // 配置别名，非必需，为方便而已
      '@': path.resolve(__dirname, '../src'),
      'mods': path.resolve(__dirname, '../src/mods')
    },
    // 在import这些拓展名的文件时，可以省略拓展名
    extensions: ['*', '.js', '.json', '.vue'],
  }
}

引用的时候：

import a from 'mods/a'

一般不会单独针对某个文件配置