vuecli3 项目添加配置文件以及使用@映射、代理

时间:2021-06-29 19:26:44

在根目录下新建 vue.config.js

1、vue.config.js中配置路径别名方法

// vue.config.js
module.exports = {
configureWebpack: {
resolve: {
alias: {
'assets': '@/assets',
'components': '@/components',
'views': '@/views',
}
}
},
}

之所以用'@/assets',是因为偷了个懒利用3.x中/node_modules/@vue/cli-service/lib/config/base.js中已经配好的@路径,有兴趣的可以进入文件里面看一看

2、使用vuecli 2.0的方式设置

const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set("@", path.join(__dirname, "src"))
.set("components", resolve("src/components"));
}
};

这个我个人配置的项目config   (映射、代理服务)

// vue.config.js
const path = require("path"); function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
baseUrl: "/",
outputDir: "dist", // 打包的目录
lintOnSave: true, // 在保存时校验格式
productionSourceMap: false, // 生产环境是否生成 SourceMap
//代理服务 配置项目跨域用到
devServer: {
open: true, // 启动服务后是否打开浏览器
host: "0.0.0.0",
port: 8080, // 服务端口
https: false,
hotOnly: false,
proxy: {
"/api": {
target: "http://test.xxx.com.cn",
ws: true, // proxy websockets
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
"^/api": "" // 设置过滤关键字api ,
// '^/': '' // 设置过滤关键字为空 ,
}
}
}
},
chainWebpack: config => {
config.resolve.alias
.set("@", path.join(__dirname, "src"))
.set("components", resolve("src/components"));
}
};