vue專案webpack打包專案輸出可修改配置項

前不久專案打包交付測試進行測試時，需要打包到不同的測試伺服器分別指向其對應api位址，如果打包一次修改一次api位址，那豈不是很麻煩？

今天我們就來解決這個問題：

核心思路：打包輸出乙份配置，**中獲取配置

方法一：

1.在static(webpack不會編譯)下建立serve.config.js

/**

* @description 打包後抽取的配置 baseurl 必須是host位址 + 埠號
*/(function () 
})()

// window.glob.base_url

let host = ''
// 開發環境 npm run dev
if (process.env.node_env !== 'production') else else 
}

4.打包後效果

方法二：

利用webpack打包出配置檔案

npm i compression-webpack-plugin -s

const generateassetplugin = require('generate-asset-webpack-plugin')

const createjson = function () ,
msg:''
}return json.stringify(serveconfigjson,null,4)
}// 3.6利用webpack.plugin.push 新增外掛程式 --- 4.0 ：compiler.hooks.***.tap(, fn)
webpackconfig.plugins.push(
// 抽離打包配置檔案
new generateassetplugin(,
extrafiles: })）

request.get('./serve.config.json')

.then(res => )
.catch(err => )

webpack打包vue專案效能優化

專案打包上線設定productionsourcemap為false減小.map檔案所佔dist檔案的體積 開啟gzip對dist檔案進一步壓縮 ps 需後端配合開啟gzip方可使用 使用cdn減小打包後vendor.js的體積，從而縮短首屏載入時間 ps 第3步如果注釋掉出現錯誤可以不進行注釋 按需...

webpack搭建vue專案流程以及打包發布流程

目錄 1.1 命令列初始化專案 1.2 分析專案目錄 1.3 執行專案 1.4 多環境配置打包發布 最近公升級到vue cli3，發現vue cli2搭建專案命令不能用了，兩者搭建開發環境專案內容也發生了變化。vue cli2搭建專案環境的命令 vue init webpack vue2 webpa...

Vue工程webpack打包

npm install webpack g npm install webpack cli g webpack v webpack cli v 新建hello.js暴露方法供其他js引用，可防止原生 script script 標籤引入多個js方法重名的問題。暴露乙個方法 exports.sayhi...