前言

vue.config.js 是一個(gè)用于 Vue 項(xiàng)目的配置文件，用于自定義項(xiàng)目的構(gòu)建配置。在這個(gè)文件中，你可以修改 webpack 相關(guān)的選項(xiàng)，以滿足你的項(xiàng)目需求。
webpack當(dāng)前版本 @5.88.2

在你的項(xiàng)目根目錄下，找到或創(chuàng)建一個(gè)名為 vue.config.js 的文件，根據(jù)以下內(nèi)容進(jìn)行修改:

配置靜態(tài)資源訪問(wèn)路徑

module.exports = {
  // 靜態(tài)資源訪問(wèn)路徑，默認(rèn) '/'
  publicPath: './'
}

配置輸出目錄

module.exports = {
  // 指定構(gòu)建后的輸出目錄，默認(rèn) 'dist'
  outputDir: 'dist'
}

配置開(kāi)發(fā)服務(wù)器啟動(dòng)時(shí)是否自動(dòng)打開(kāi)和端口號(hào)

module.exports = {
   // 配置開(kāi)發(fā)服務(wù)器選項(xiàng)
  devServer: {
    // 開(kāi)發(fā)服務(wù)器啟動(dòng)時(shí)是否自動(dòng)打開(kāi)瀏覽器
    open: true,
    // 端口號(hào)
    port: 3000
  },
}

自定義 webpack 配置：

module.exports = {
  // webpack 的配置對(duì)象
  configureWebpack: {
    // 在這里添加或修改 webpack 的配置
  },
}

配置路徑別名alias

找到 src/assets 文件夾，新建 images、scripts、styles 文件夾
將 src/assets 文件夾中 logo.png 文件放入 images 文件夾
在 vue.config.js 配置中中添加以下兩部分代碼：

const path = require('path')

configureWebpack: {
  // 配置Webpack模塊解析的方式，使得你可以通過(guò)模塊名字而不是相對(duì)路徑來(lái)引入模塊
  resolve: {
    // 設(shè)置路徑別名
    alias: {
      '@': path.resolve('src'),
      '@public': path.resolve('public'),
      '@img': path.resolve('src/assets/images'),
      '@js': path.resolve('src/assets/scripts'),
      '@css': path.resolve('src/assets/styles')
    }
  }
}

上述代碼使用 Node.js 的 path 模塊來(lái)處理文件路徑。__dirname 表示當(dāng)前文件所在的目錄。

在 resolve.alias 下添加你需要的路徑別名。例如，'@' 被配置為指向 src 目錄，表示你可以使用 @ 作為 src 目錄的別名。

配置文件改動(dòng)后需要重新啟動(dòng)開(kāi)發(fā)服務(wù)器，這樣才能讓修改生效。

現(xiàn)在，你可以在你的 Vue 項(xiàng)目中使用路徑別名了。例如，你可以使用 @img 來(lái)引用 src/assets/images 目錄下的圖片。

1.找到 src/App.vue
2.將logo圖片路徑改為以下內(nèi)容后：

<img alt="Vue logo" src="@img/logo.png">

3.將組件引入路徑改為以下內(nèi)容：

import HelloWorld from '@/components/HelloWorld.vue'

4. 查看效果。

vue.config.js 修改完成后的文件內(nèi)容如下：

const path = require('path')

module.exports = {
  // 靜態(tài)資源訪問(wèn)路徑
  publicPath: './',
  // 指定構(gòu)建后的輸出目錄，默認(rèn)是 'dist'
  outputDir: 'dist',
  // 配置開(kāi)發(fā)服務(wù)器選項(xiàng)
  devServer: {
    // 開(kāi)發(fā)服務(wù)器啟動(dòng)時(shí)是否自動(dòng)打開(kāi)瀏覽器
    open: true,
    // 端口號(hào)
    port: 3000
  },
  // webpack 的配置對(duì)象
  configureWebpack: {
    // 配置Webpack模塊解析的方式，使得你可以通過(guò)模塊名字而不是相對(duì)路徑來(lái)引入模塊
    resolve: {
      // 設(shè)置路徑別名
      alias: {
        '@': path.resolve('src'),
        '@public': path.resolve('public'),
        '@img': path.resolve('src/assets/images'),
        '@js': path.resolve('src/assets/scripts'),
        '@css': path.resolve('src/assets/styles')
      }
    }
  }
}

還可以使用其它的選項(xiàng)來(lái)自定義構(gòu)建行為，具體可以參考 Vue CLI 官方文檔中的 vue.config.js 配置參考。

框架搭建整體流程

• 第一步 Vue2 使用 Vue 腳手架 Vue CLI 搭建一個(gè) Vue.js 前端項(xiàng)目框架

• 第二步 Vue2 vue.config.js 基礎(chǔ)配置，路徑別名alias

• 第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局變量

• 第四步 Vue2 配置ESLint

• 第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置圖片壓縮

• 第六步 Vue2 集成全家桶 vue-router vuex axios 和 element-ui

• 第七步 Webpack 配置多環(huán)境和全局變量 cross-env 和 webpack.DefinePlugin

點(diǎn)擊下載步驟 1-7 配置完成的完整 Demo