Vue中如何配置自定义路径别名

我们在开发过程中，常常会导入一些模块或者组件，如果采用相对路径的方式，类似下面这样的代码：

import uEditor from "../../../../../components/tools/ueditor/ueditor";

这样引入虽然没什么问题，但是总感觉代码写的不是很优雅，而且后期如果目录调整了，可能会牵涉到这个地方也要跟着修改，所以为了解决这样的问题，今天就简单介绍一下自定义路径的配置方式。

一、打开项目根目录中的vue.config.js文件，找到configureWebpack部分。

configureWebpack: {
    resolve: {
      alias: {
        vue$: "vue/dist/vue.esm.js",
        //资源基准路径（前面的key值就是别名，可以自定义一个字符串，后面的@默认代表指向src目录）
        "@assets": "@/assets",
        //组件基准路径
        "@components": "@/components",
      }
    }
  },

二、配置完之后使用

1.在js里面的使用（script标签内）

import imageUpload from "@components/tools/imageupload/imageupload";

2.在css里面的使用（style标签内）

# 注意：这里写的时候要在别名的最前面加一个~
@import "~@assets/style/common.scss";

3.在模板里面的使用（template标签内）

<img src="@assets/image/common/listdefault.png" />

三、首次配置需要重启一下服务（别忘了哦o(￣︶￣)o）

npm run serve