最近用vue腳手架新建工程的時候，發現vue-cli提供的是3.0.0-beta.6版本，安裝完成之后也找不到config、build等目錄，不懂要從哪里入手配置別名alias

看了下官方文檔，簡化成使用vue.config.js來配置項目，一路找到了webpack這一項，發現它可以使用了webpack-chain鏈式API的調用方式，簡化了對webpack配置的修改。

安裝

npm install -g @vue/cli # or yarn global add @vue/clivue create my-project 復制代碼

啟動

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint" } 復制代碼

配置

在根目錄新建vue.config.js

const path = require('path'); function resolve (dir) {return path.join(__dirname, dir) } module.exports = {lintOnSave: true,chainWebpack: (config)=>{config.resolve.alias.set('@$', resolve('src')).set('assets',resolve('src/assets')).set('components',resolve('src/components')).set('layout',resolve('src/layout')).set('base',resolve('src/base')).set('static',resolve('src/static'))} } 復制代碼

參考

vue-cli configuration

webpack-chain

謝謝您的品讀，此處拋磚引玉，希望大家共同探討學習。

總結

以上是生活随笔為你收集整理的vue-cli 3.0配置webpack目录别名alias的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。