js webpack 配置路径_vue使用webpack配置路径别名

原始的文件引用方式的缺点要拼写一个巨长无比的字符串，而且每引用一次都要拼写一次。

如果这个文件位置变了，我就要把所有引用它的文件都修改一次。

下面介绍一种很优雅的方式，使用webpack的resolve.alias。以下面的目录结构为例：

-src

-components

-navBar.vue

-main.js

复制代码

vue-cli 2.0 中如何使用？

在vue-cli 2.0的工程中，在\build\webpack.base.conf.js文件下找到如下代码

resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') }}复制代码

extensions中配置了可以自动解析的文件类型，在引入的时候不必写文件后缀，如在main.js中引用nvaBar组件：

import navBar from './components/navBar'复制代码

这里便可以不写.vue后缀名。

2.alias则代表的是别名。

配置文件中自动将@配置为src的别名，所以我们使用别名引入navBar时可以这么写：import navBar from '@/components/navBar'复制代码

照猫画虎，我们可以将components目录也配置一个别名：

'@components': resolve('src/components')复制代码

那么再次引用组件时就更加的便捷了：

import navBar from '@components/navBar'复制代码

why?

这里我们谈谈原理，有助于了解别名在vue-cli3.0中的使用。

原理很简单：字符串拼接。

我们在刚刚修改的同文件中会找到如下代码

const path=require('path');

function resolve (dir) { return path.join(__dirname, '..', dir)}

复制代码

path是node中的一个模块，这里引用他是处理路径

resolve就是我们刚刚使用的方法，path.join([...paths])会把给定的路径拼接成一个完整的路径，这里的第一个参数__dirname表示当前文件所在目录，'..'则表示上级目录，前两个参数所得到的目录就是build,src所在的那一级目录。第三个参数就是我们所传进的参数，最后得到的结果正好就是我们所指定的那一级目录。resolve('src/components')复制代码

指向的就是components目录。

vue-cli 3.0 中如何使用？

在vue-cli3.0 中不再使用传统的webpack配置文件，而是已经内嵌了webpack的基础配置。同时预留了vue.config.js供开发者对webpack进行自定义配置。这个文件是建在与src同级的目录里。

在这里我们同样先声明path：

const path=require('path');复制代码