在Vue项目中，Vue CLI2和Vue CLI3文件路径别名的配置

在Vue项目中，Vue CLI2和Vue CLI3文件路径别名的配置

我们在写Vue项目时，常常会在某个地方引用许多文件，会创建许多文件夹，在引用路径的时候在前面加" . "是非常苦恼的事情，而且代码的阅读性也很差，像下面这样：

`import MovieItem from "../../../components/movieitem/MovieItem"

在vue中可以通过配置别名的方式来简化。

在VueCLI2中

找到文件夹：build>webpack.base.conf.js

在webpack.base.conf.js中找到

在这里插入代码片 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
    }
  },

这里就是我们配置别名的地方，其中的extensions中配置的是我们文件的后缀名，我们在写文件名称的时候可以省略后缀名，这个很少用到，看自己的需求吧！
在alias中我们就可以映射对应的别名了，可以看到脚手架为我们默认配置了项目的根路径src为@，这里我们可以根据自己的需求为文件夹配置别名：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      //"assets": "@/assets", // 这种方式不行，具体原因需要再研究
      "assets": "src/assets",
      "components": "src/components",
      "network": "src/network",
      "views": "src/views",
    }
  },

在这里Vue CLI2路径别名就配置完成了。

在VueCLI3中

脚手架3中将配置文件做了隐藏，让文件夹更简洁，我们需要手动配置一些东西的时候需要在src目录下创建一个vue.config.js文件夹，别名配置如下：

module.exports = {
	// 为项目文件夹配置别名
	configureWebpack: {
		resolve: {
			alias: {
				// 在cli2中看到已经为src配置别名为@，在cli3中这样配置就没问题
				"assets": "@/assets",
				"components": "@/components",
				"network": "@/network",
				"views": "@/views",
			}
		}
	},
}

使用

在组件中我们直接利用别名即可：

import MovieItem from "components/movieitem/MovieItem";

**注意：**上面我们是通过import的方式导入，而在templete中我们可能也会引用静态的资源文件，它是需要使用require引入的，我们不能直接像下面这样引用：

<img src="assets/img/icon/not-history.png">

这种方式html无法解析到我们配置的图片路径，因此在最前面加一个"~"即可解决：

<img src="~assets/img/icon/not-history.png">