Vue-cli搭建的项目中路径别名的配置

路径别名配置分别有两种方式

首先展示一下项目结构 对照项目结构配置

在项目根目录下创建vue.config.js文件

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

使用cli3.x创建的项目在配置路径别名时可以使用@代表src，在node_modules/@vue/cli-service/lib/config/base.js文件中已经配置好的

使用cli4.x创建的项目也可以进行以下配置

const path = require('path');//引入path模块 function resolve(dir){ return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径 } module.exports = { chainWebpack: (config)=>{ config.resolve.alias .set('components',resolve('src/components')) .set('views',resolve('src/views')) .set('assets',resolve('src/assets')) .set('common',resolve('src/common')) .set('network',resolve('src/network')) //set第一个参数：设置的别名，第二个参数：设置的路径　　　　 } }