Vue Production Deployment By Laravel | laravel vue mix
今天來分享一下如何透過Laravel-MIX來部屬Vue的Production版本。Vueproductiondeployment主要是參照Vue官網提供的建議[1]。可以先說結論:Laravel-MIX都幫你處理好了,只是要對設定參數做增減即可。(JefferyWay真是太神啦!)如果不知道Laravel-Mix的人可以先上一下Laravel官網[2],簡單來說,Laravel-Mix是一個封裝過的webpack[3],他可以幫你處理前端套件的一些功能,例如壓縮,版本號…等等,並附帶一些常用的設定。如果你是Laravel5.3版以前,你用的是Laravel-Elixir[4],Elixir用的是Gulp,而非Webpack,所以本篇可能就會不符您的...
今天來分享一下如何透過Laravel-MIX來部屬Vue 的Production版本。Vue production deployment 主要是參照Vue官網提供的建議[1]。
可以先說結論:Laravel-MIX都幫你處理好了,只是要對設定參數做增減即可。(Jeffery Way 真是太神啦!)
如果不知道Laravel-Mix的人可以先上一下Laravel 官網[2],簡單來說,Laravel-Mix是一個封裝過的webpack[3],他可以幫你處理前端套件的一些功能,例如壓縮,版本號…等等,並附帶一些常用的設定。如果你是Laravel 5.3版以前,你用的是Laravel-Elixir[4],Elixir用的是Gulp,而非Webpack,所以本篇可能就會不符您的需求,可能要請您升到5.4版才可以使用。以下就直接進入正題囉!
根據Vue官網的建議[5],請進行以下步驟:
Turn on Production Mode[6]Vue 預設下是使用Develop mode,所以會出現一些 warnings 及errors,但是這些東西當然不能再production 被看到,所以我們要切換成Production mode 去避免此問題。
如果你是直接用script tag 去指定路徑,請使用vue.min.js的版本即可。
如果你用的是webpack 或是 Browserify,production mode 應該都已經被設置好了,當然我們用的Laravel-Mix也是被設置好的。你可以打開Laravel 內的package.json的script
{ //... "scripts": { //... "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", //... } }你要注意的是就是在部屬時,記得切換到資料夾內...