項(xiàng)目中使用引入文件有時(shí)候路徑比較深，需要使用"../../../xx.js"這種類(lèi)似的路勁引入阔挠，這種方式比較笨飘庄，可以使用webpack的別名alias配置來(lái)解決。
首先购撼，先確定項(xiàng)目中是否有path模塊：
如果沒(méi)有path模塊需要先安裝path
npm? install? path? --save
?以下為vue.config.js配置
constpath = require("path");
function resolve(dir) {
? return path.join(__dirname, dir);
}
module.exports = {
? chainWebpack: config => {
? ? config.resolve.alias
? ? ? .set("@", resolve("src"))
? ? ? .set("assets", resolve("src/assets"))
? ? ? .set("components", resolve("src/components"))
? ? ? .set("base", resolve("baseConfig"))
? ? ? .set("public", resolve("public"));
? },
}
項(xiàng)目開(kāi)發(fā)階段經(jīng)常需要console一些測(cè)試數(shù)據(jù)跪削，查看開(kāi)發(fā)過(guò)程中遇到的問(wèn)題，但生產(chǎn)環(huán)境中這些console數(shù)據(jù)需要清掉迂求，以前操作是項(xiàng)目配置一個(gè)全局的標(biāo)志碾盐，判斷是否打印console數(shù)據(jù)，近期發(fā)現(xiàn)一個(gè)更簡(jiǎn)便的方法揩局，通過(guò)webpack配置生產(chǎn)環(huán)境自動(dòng)清除console毫玖。
首先，安裝uglifyjs-webpack-plugin插件：
npm? install? uglifyjs-webpack-plugin? --save
其次凌盯，在vue.config.js文件引入插件付枫。
最后，配置configureWebpack如下代碼：
constUglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 引入插件
module.exports = {
? configureWebpack: {
? ? optimization: {
? ? ? minimizer: [
? ? ? ? new UglifyJsPlugin({
? ? ? ? ? uglifyOptions: {
? ? ? ? ? ? compress: {
? ? ? ? ? ? ? warnings: false,
? ? ? ? ? ? ? drop_console: true,//consoledrop_debugger:false,
? ? ? ? ? ? ? pure_funcs: ["console.log"]//移除console? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? })
? ? ? ]
? ? }
? },
}
?這兩個(gè)webpack配置還是挺實(shí)用的驰怎，本人親測(cè)有效阐滩，希望能夠解決你遇到的問(wèn)題。
