一、為什么引入 path 模塊
path 模塊，提供了一些工具函數，用於處理文件與目錄的路徑。path.join()方法用於連接路徑，該方法會正確識別當前系統的路徑分隔符，如Unix系統是”/“，Windows系統是”\“。__dirname 是node的一個全局變量，即獲得當前文件所在目錄的完整目錄名。
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir);
}
module.exports = {
chainWebpack: (config) => {
config.resolve.alias // 為指定目錄設置全局別名
.set('@', resolve('src'))
.set('@public', resolve('public'))
}
}
二、vue.config.js 文件其他部分配置：
console.log('==================系統初始化，vue.config.js 配置文件開始加載==================');
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir);
}
var targetUrl = 'http://localhost:8080';
if (process.env.VUE_APP_URL != undefined && process.env.VUE_APP_URL != '') {
targetUrl = process.env.VUE_APP_URL;
}
console.log('targetUrl:' + targetUrl);
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "./" : "./", // 部署應用時的根路徑(默認'/'),也可用相對路徑(存在使用限制)
outputDir: "dist", // 運行時生成的生產環境構建文件的目錄(默認''dist''，構建之前會被清除)
assetsDir: "static", //放置生成的靜態資源(s、css、img、fonts)的(相對於 outputDir 的)目錄(默認'')
lintOnSave: true, // 是否開啟eslint保存檢測
productionSourceMap: false, // 是否在構建生產包時生成sourcdeMap
chainWebpack: (config) => {
config.resolve.alias // 為指定目錄設置全局別名
.set('@', resolve('src'))
.set('@public', resolve('public'))
},
devServer: {
/* 本地ip地址 */
host: "localhost",
port: "80",
hot: true,
/* 自動打開瀏覽器 */
open: false,
overlay: {
warning: false,
error: true
}, // 錯誤、警告在頁面彈出
/* 跨域代理 */
proxy: {
"/api": {
/* 目標代理服務器地址 */
target: targetUrl , //
/* 允許跨域 */
changeOrigin: true,
ws: true,
pathRewrite: {
"^/api": ""
}
} //,
// '/foo': {
// target: '<other_url>'
// }
}
// pluginOptions: {// 第三方插件配置
//
// }
}
};
console.log('==================系統初始化，vue.config.js 配置文件加載結束==================');
版權聲明：https://jingyan.baidu.com/article/295430f167f3334c7f005065.html