vue-cli 如何打包上線的方法示例
以vue創(chuàng)建的官方例子為例子，我們在開發(fā)環(huán)境的時(shí)候會 npm run dev ，生成
而想要打包成一份
很簡單， 只需要 npm run build 這個(gè)命令
這兩種命令的配置文件在config的index.js 一種是build 一種是dev ，而我們想要在本地查看打包后的成果，需要在assetsPublicPath 改變它的路徑， 具體為什么，可以看index.html引入的文件路徑
之后只需要放在服務(wù)器上運(yùn)行就好了。
*常用技巧
1.如果在config -> index.js 中的 build 代碼中的 productionSourceMap的值設(shè)為false ，打包后文件體積可以減少百分之八十
2.如果設(shè)置build文件夾下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置參數(shù)添加hash: true，即會使打包生成的index.html中的js和css路徑帶有？+隨機(jī)字符串，也就是版本控制
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作
這篇文章主要介紹了nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
詳解webpack + vue + node 打造單頁面(入門篇)
本篇文章主要介紹了詳解webpack + vue + node 打造單頁面(入門篇) ，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
Vue組件BootPage實(shí)現(xiàn)簡單的分頁功能
這篇文章主要為大家詳細(xì)介紹了Vue小組件BootPage實(shí)現(xiàn)簡單的分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
ElementUI中<el-form>標(biāo)簽中ref、:model、:rules的作用淺析
Element官方文檔中寫到,model是表單數(shù)據(jù)對象,rules是表單驗(yàn)證規(guī)則,下面這篇文章主要給大家介紹了關(guān)于ElementUI中<el-form>標(biāo)簽中ref、:model、:rules作用的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue使用element-plus依賴實(shí)現(xiàn)表格增加的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue使用element-plus依賴實(shí)現(xiàn)表格增加,文中示例代碼講解的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2023-12-12
Vue3中使用echarts的簡單七個(gè)步驟(易懂,附緊急避坑)
近期在做一個(gè)vue3的項(xiàng)目,里面有個(gè)圖表需求,因公司之前使用第三方封裝的圖表缺少文檔,就去看了echars的官網(wǎng)文檔,引入原生echars來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用echarts的簡單七個(gè)步驟,需要的朋友可以參考下2023-01-01
今天小編就為大家分享一篇Vue文件配置全局變量的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue設(shè)置路由title,但刷新頁面時(shí)title失效的解決
這篇文章主要介紹了vue設(shè)置路由title，但刷新頁面時(shí)title失效的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
原生JS實(shí)現(xiàn)Vue transition fade過渡動畫效果示例
這篇文章主要為大家介紹了原生JS實(shí)現(xiàn)Vue transition fade過渡動畫效果示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了vue?ant?design?封裝彈窗表單的使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06