VueCli3中别名的使用以及一些问题的解决方式

VueCli3中别名的使用以及一些问题的解决方式

平时使用脚手架写项目时，有时项目目录结构太复杂，在引用一些组件或图片时，会变得很复杂，如图：
由图可见，要想在当前编辑的文件中使用另外文件中存储的图片，如果用相对路径的话，会用到许多…/…/，并且后期如果将项目目录结构变换的话，也会造成许多不便。

解决方式：
在项目中，新建 一个vue.config.js的文件。（注意：此文件是和src同级的！否则会报错找不到路径）
在vue.config.js中的代码：

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

因为在Vuecli3中默认@为src，所以不必再定义@，只需对别的文件进行别名定义。alias中冒号左边是别名，冒号右边是对应源路径。

定义好别名之后，还需注意：
在js、css中引用和在dom中引用别名时用法还有所区别。
在js和css中，直接使用别名即可，但在dom中需要加~（shift+`）。

这里举个例子。
文件目录如下：

在App.vue中想导入MainTabbar组件时：

使用别名前的写法：

import MainTabbar from './components/content/mainTabbar/MainTabbar'

使用别名后的写法：

import MainTabbar from 'components/content/mainTabbar/MainTabbar'

在App.vue中想导入base.css时：

使用别名前的写法：

 @import "./assets/css/base.css";

使用别名后的写法：

  @import "assets/css/base.css";

在MainTabbar 的dom中引入图片

使用别名前的写法：

<Tabbaritem path="/home" activeColor="blue">
      <img slot="item-icon" src="../../../assets/img/tabbar/home.svg"></img>
      <img slot="item-icon-active" src="../../../assets/img/tabbar/home_active.svg"></img>
      <div slot="item-text">首页</div>
</Tabbaritem>

使用别名后的写法：

 <Tabbaritem path="/home" activeColor="blue">
      <img slot="item-icon" src="~assets/img/tabbar/home.svg"></img>
      <img slot="item-icon-active" src="~assets/img/tabbar/home_active.svg"></img>
      <div slot="item-text">首页</div>
</Tabbaritem>

最后，说一下我遇到的坑。
有时配置完之后并且路径也没错时，npm run serve后还是显示依赖路径找不到。
此时，重启编辑器或者终端试一下，尤其是改了vue.config.js文件后。

如果还没有成功，试一试在项目中重新输入一下提示报错的路径。