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-09Vue組件BootPage實(shí)現(xiàn)簡單的分頁功能
這篇文章主要為大家詳細(xì)介紹了Vue小組件BootPage實(shí)現(xiàn)簡單的分頁功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09ElementUI中<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-01vue使用element-plus依賴實(shí)現(xiàn)表格增加的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue使用element-plus依賴實(shí)現(xiàn)表格增加,文中示例代碼講解的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2023-12-12Vue3中使用echarts的簡單七個(gè)步驟(易懂,附緊急避坑)
近期在做一個(gè)vue3的項(xiàng)目,里面有個(gè)圖表需求,因公司之前使用第三方封裝的圖表缺少文檔,就去看了echars的官網(wǎng)文檔,引入原生echars來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用echarts的簡單七個(gè)步驟,需要的朋友可以參考下2023-01-01vue設(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