vue配置vue.config.js超詳細教程

更新時間：2024年01月04日 15:20:22 作者：郝南過

Vue的配置項'vue.config.js'是用來配置Vue項目的構建配置的,它是一個可選的配置文件,放置在項目的根目錄下,這篇文章主要給大家介紹了關于vue配置vue.config.js的相關資料,需要的朋友可以參考下

一、在src目錄下創(chuàng)建 settings.js用于存放所有規(guī)則配置

module.exports = {
  title: 'Example示例',
  transpileDependencies: true
  // 關閉eslint校驗
  // lintOnSave: false
}

在vue.config.js中添加以下語句引入settings.js文件

const defaultSettings = require('./src/settings.js')

二、在vue.config.js文件中添加path模塊

path 模塊，提供了一些工具函數，用于處理文件與目錄的路徑。path.join()方法用于連接路徑，該方法會正確識別當前系統(tǒng)的路徑分隔符，如Unix系統(tǒng)是”/“，Windows系統(tǒng)是”\“。__dirname 是node的一個全局變量，即獲得當前文件所在目錄的完整目錄名。

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

三、在vue.config.js中添加端口和網址標題設置

const name = defaultSettings.title // 網址標題
const port = 8099 // 端口配置

四、在vue.config.js中配置module.exports及代理，并在前端解決跨域問題

const path = require('path')
const defaultSettings = require('./src/settings.js')
function resolve(dir) {
    return path.join(__dirname, dir)
  }
  const name = defaultSettings.title // 網址標題
  const port = 8099 // 端口配置
  module.exports = {
    // 配置基地址BASE_URL等于publicpath的值
    // NODE_ENV：Node.js 暴露給執(zhí)行腳本的系統(tǒng)環(huán)境變量。通常用于確定在開發(fā)環(huán)境還是生產環(huán)境
    // 部署應用時的根路徑(默認'/'),也可用相對路徑(存在使用限制)
    publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
    // publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
    outputDir: 'dist', // 輸出文件目錄
    assetsDir: 'static', // // 放置靜態(tài)資源
    lintOnSave: process.env.NODE_ENV === 'development',// true/false 設置為開發(fā)環(huán)境下每次保存代碼時都啟用 eslint驗證
    productionSourceMap: false, // 如果你不需要生產環(huán)境的 source map，可以將其設置為false以加速生產環(huán)境構建
    devServer: {  // 配置開發(fā)服務器
      port: port,
    //   overlay: {  // 錯誤、警告在頁面彈出
    //     warnings: false,
    //     errors: true
    //   },
      /* 跨域代理 */
      proxy: {
        // 第一種寫法
        '/api': {
          /* 目標代理服務器地址 */
          target: 'http://localhost:8090/',
          /* 允許跨域 */
          changeOrigin: true,
          pathRewrite: {  // 標識替換
            '^/api': '/static/mock'  // 請求數據路徑別名,這里是注意將static/mock放入public文件夾
          }
        },
        // 第二種寫法
        [process.env.VUE_APP_BASE_API]: {  // 使用環(huán)境變量中的值
          target: 'http://127.0.0.1:9000/',
          changeOrigin: true,
          pathRewrite: {
            ['^' + process.env.VUE_APP_BASE_API]: '',
            '^/api': ''
          }
        }
      }
    }
  }

至此前后端解決跨域的方法都有了，可只寫一個，也可全寫

devServer.proxy中的 pathRewrite說明：

如圖，pathRewrite設置了 '^/api': '' ，作用如下:

        使用代理，首先需要有一個標識，告訴程序這個連接要使用代理，不然的話，可能你的html、css、js、矢量圖等靜態(tài)資源都跑去代理。所以我們要通過一個唯一標識，讓接口使用代理，靜態(tài)資源文件使用本地。

        proxy中的 '/api':{······}，就是告訴node，我的接口是要以 /api 開頭的才使用代理。所有的接口都要寫成 /api/xx/xx ，以 /api 開頭，最后代理的接口路徑路徑就是 http://localhost:8090/api/xx/xxi

        但是例子中真實的后臺數據接口里沒有 /api，直接就是 http://localhost:8080/xx/xx ，所以就需要配置 pathRewrite，用'^/api': '' 將 /api 去掉，這樣既有正確的標識，又能在真實請求接口的時候去掉 /api 。

五、創(chuàng)建上一步中的開發(fā)環(huán)境配置文件.env.development

可對應配置相應的生產環(huán)境配置文件

 ENV = 'development'
VUE_APP_BASE_API = 'http://localhost:8090/api/'

六、修改request.js中的baseURL

import axios from "axios";
const service = axios.create({
    // baseURL: 'http://localhost:8090/api',
    baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    timeout: 3000
})
export default service;