快捷導(dǎo)航

vue配置vue.config.js超詳細(xì)教程

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

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

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

module.exports = {
  title: 'Example示例',
  transpileDependencies: true
  // 關(guān)閉eslint校驗(yàn)
  // lintOnSave: false
}

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

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

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

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

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

三、在vue.config.js中添加端口和網(wǎng)址標(biāo)題設(shè)置

const name = defaultSettings.title // 網(wǎng)址標(biāo)題
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 // 網(wǎng)址標(biāo)題
  const port = 8099 // 端口配置
  module.exports = {
    // 配置基地址BASE_URL等于publicpath的值
    // NODE_ENV：Node.js 暴露給執(zhí)行腳本的系統(tǒng)環(huán)境變量。通常用于確定在開發(fā)環(huán)境還是生產(chǎn)環(huán)境
    // 部署應(yīng)用時(shí)的根路徑(默認(rèn)'/'),也可用相對(duì)路徑(存在使用限制)
    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 設(shè)置為開發(fā)環(huán)境下每次保存代碼時(shí)都啟用 eslint驗(yàn)證
    productionSourceMap: false, // 如果你不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為false以加速生產(chǎn)環(huán)境構(gòu)建
    devServer: {  // 配置開發(fā)服務(wù)器
      port: port,
    //   overlay: {  // 錯(cuò)誤、警告在頁(yè)面彈出
    //     warnings: false,
    //     errors: true
    //   },
      /* 跨域代理 */
      proxy: {
        // 第一種寫法
        '/api': {
          /* 目標(biāo)代理服務(wù)器地址 */
          target: 'http://localhost:8090/',
          /* 允許跨域 */
          changeOrigin: true,
          pathRewrite: {  // 標(biāo)識(shí)替換
            '^/api': '/static/mock'  // 請(qǐng)求數(shù)據(jù)路徑別名,這里是注意將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': ''
          }
        }
      }
    }
  }

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

devServer.proxy中的 pathRewrite說明：

如圖，pathRewrite設(shè)置了 '^/api': '' ，作用如下:

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

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

        但是例子中真實(shí)的后臺(tái)數(shù)據(jù)接口里沒有 /api，直接就是 http://localhost:8080/xx/xx ，所以就需要配置 pathRewrite，用'^/api': '' 將 /api 去掉，這樣既有正確的標(biāo)識(shí)，又能在真實(shí)請(qǐng)求接口的時(shí)候去掉 /api 。

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

可對(duì)應(yīng)配置相應(yīng)的生產(chǎn)環(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;