前面的話

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括興安網(wǎng)站建設(shè)、興安網(wǎng)站制作、興安網(wǎng)頁(yè)制作以及興安網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，興安網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到興安省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

開(kāi)發(fā)時(shí)，Vue 會(huì)提供很多警告來(lái)幫助解決常見(jiàn)的錯(cuò)誤與陷阱。生產(chǎn)時(shí)，這些警告語(yǔ)句卻沒(méi)有用，反而會(huì)增加載荷量。再次，有些警告檢查有小的運(yùn)行時(shí)開(kāi)銷，生產(chǎn)環(huán)境模式下是可以避免的。本文將詳細(xì)介紹Vue生產(chǎn)環(huán)境部署

生產(chǎn)環(huán)境

如果用 Vue 完整獨(dú)立版本 (直接用 <script> 元素引入 Vue)，生產(chǎn)時(shí)應(yīng)該用精簡(jiǎn)版本 (vue.min.js)

如果用 Webpack 或 Browserify 類似的打包工具時(shí)，生產(chǎn)狀態(tài)會(huì)在 Vue 源碼中由 process.env.NODE_ENV 決定，默認(rèn)在開(kāi)發(fā)狀態(tài)。Webpack 與 Browserify 兩個(gè)打包工具都提供方法來(lái)覆蓋此變量并使用生產(chǎn)狀態(tài)，警告語(yǔ)句也會(huì)被精簡(jiǎn)掉。每一個(gè) vue-cli 模板有預(yù)先配置好的打包工具，但了解怎樣配置會(huì)更好

【webpack】

使用 Webpack 的 DefinePlugin 來(lái)指定生產(chǎn)環(huán)境，以便在壓縮時(shí)可以讓 UglifyJS 自動(dòng)刪除代碼塊內(nèi)的警告語(yǔ)句

var webpack = require('webpack')
module.exports = {
 // ...
 plugins: [
  // ...
  new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: '"production"'
   }
  }),
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  })
 ]
}

【Browserify】

運(yùn)行打包命令，設(shè)置 NODE_ENV 為 "production"。等于告訴 vueify 避免引入熱重載和開(kāi)發(fā)相關(guān)代碼

使用一個(gè)全局 envify 轉(zhuǎn)換 bundle 文件。這可以精簡(jiǎn)掉包含在 Vue 源碼中所有環(huán)境變量條件相關(guān)代碼塊內(nèi)的警告語(yǔ)句

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

【Rollup】

使用 rollup-plugin-replace：

const replace = require('rollup-plugin-replace')
rollup({
 // ...
 plugins: [
  replace({
   'process.env.NODE_ENV': JSON.stringify( 'production' )
  })
 ]
}).then(...)

預(yù)編譯模板

當(dāng)需要處理 DOM 內(nèi)或 JavaScript 內(nèi)的模板時(shí)，“從模板到渲染函數(shù)”的編譯就會(huì)在線上發(fā)生。通常情況下這種處理是足夠快的，但是如果應(yīng)用對(duì)性能很敏感最好還是回避。

預(yù)編譯模板最簡(jiǎn)單的方式就是使用單文件組件 - 相關(guān)的構(gòu)建設(shè)置會(huì)自動(dòng)把預(yù)編譯處理好，所以構(gòu)建好的代碼已經(jīng)包含了編譯出來(lái)的渲染函數(shù)而不是原始的模板字符串。

如果使用 Webpack，并且喜歡分離 JavaScript 和模板文件，可以使用 vue-template-loader，它也可以在構(gòu)建過(guò)程中把模板文件轉(zhuǎn)換成為 JavaScript 渲染函數(shù)

提取組件的CSS

當(dāng)使用單文件組件時(shí)，組件內(nèi)的 CSS 會(huì)以 <style> 標(biāo)簽的方式通過(guò) JavaScript 動(dòng)態(tài)注入。這有一些小小的運(yùn)行時(shí)開(kāi)銷，如果使用服務(wù)端渲染，這會(huì)導(dǎo)致一段“無(wú)樣式的內(nèi)容瞬間 (fouc)”。橫跨所有組件提取 CSS 到同一個(gè)文件回避這件事情，這也會(huì)更好的壓縮和緩存 CSS

跟蹤運(yùn)行時(shí)錯(cuò)誤

如果在組件渲染時(shí)出現(xiàn)運(yùn)行錯(cuò)誤，錯(cuò)誤將會(huì)被傳遞至全局 Vue.config.errorHandler 配置函數(shù) (如果已設(shè)置)。利用這個(gè)鉤子函數(shù)和錯(cuò)誤跟蹤服務(wù) (如 Sentry)，可能是個(gè)不錯(cuò)的主意

以上這篇基于Vue生產(chǎn)環(huán)境部署就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁(yè)名稱：基于Vue生產(chǎn)環(huán)境部署詳解
當(dāng)前網(wǎng)址：http://www.chinadenli.net/article24/igpece.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、軟件開(kāi)發(fā)、網(wǎng)站排名、微信公眾號(hào)、用戶體驗(yàn)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)