vue.config.js部分内容解释
一、为什么引入 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