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