vue/cli3項目中webpack的配置

1. 給文件起別名,方便引用

首先在根目錄創建配置文件 vue.config.js

const path = require('path')

//設置絕對路徑
function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  // webpack 配置進行更細粒度的修改  https://cli.vuejs.org/zh/config/#chainwebpack
  chainWebpack: (config) => {
    //修改文件引入自定義路徑
    config.resolve.alias
        .set('@', resolve('src'))
        .set('assets', resolve('src/assets'))
        .set('component',resolve('src/component'))
        .set('views',resolve('src/views'))
  }
}

然後直接以set第一個參數開頭即可

//比如懶加載里加載文件直接使用views即可
const Home = () => import('views/home/home')
const Category = () => import('views/category/category')
const ShopCart = () => import('views/shopcart/shopcart')
const My = () => import('views/my/my')

注意 在html頁面中的img等 src引入需要 在前面添加 ~ 然後再正常使用即可