淺談在vue中用webpack打包之后運(yùn)行文件的問(wèn)題以及相關(guān)配置方法
1.vue中的vue-cli打包
最近在用vue寫一個(gè)小項(xiàng)目，其中就用到了vue腳手架工具vue-cli，在測(cè)試打包后能否運(yùn)行過(guò)程中遇到不少問(wèn)題，而且在網(wǎng)上這些問(wèn)題答案都不太好找，廢話不多說(shuō)，進(jìn)入正題。
a.執(zhí)行打包命令：npm run build
b.打包之后生成的文件夾為根目錄下的dist文件：
c.進(jìn)入dist中
在運(yùn)行這個(gè)index.html之前先說(shuō)說(shuō)一些打包配置問(wèn)題：
在config文件夾下可以看到一個(gè)index.js文件，打開其中可以看到有幾個(gè)屬性分別是：
assetsRoot: path.resolve(__dirname, '../dist')//其實(shí)這個(gè)就是剛才打包后的根目錄文件夾dist,所有的文件都會(huì)輸出到這里
assetsSubDirectory: 'static' //默認(rèn)是把css,fonts,images,js輸出到這個(gè)文件夾下，但是我的改成了 assetsSubDirectory: '' 所以上圖就直接輸出到dist下了，即這個(gè)參數(shù)配置的是靜態(tài)文件的輸出目錄
assetsPublicPath: '/' 這個(gè)就是靜態(tài)文件的引用前綴
在index.html文件中可以看到每個(gè)js,css文件的引用路徑，在服務(wù)器上運(yùn)行時(shí)如果發(fā)生找不到文件如下圖
大多數(shù)情況下都是參數(shù)配置問(wèn)題，可以根據(jù)index.html文件下的路徑進(jìn)行測(cè)試進(jìn)行解決，如果不行可以留言一起交流。
相關(guān)文章
本文通過(guò)實(shí)例代碼給大家介紹了在vue中使用echarts圖表的方法，需要注意的事項(xiàng)文中給大家提到,需要的朋友可以參考下2018-10-10
Vue手動(dòng)控制點(diǎn)擊事件Click觸發(fā)方式
這篇文章主要介紹了Vue手動(dòng)控制點(diǎn)擊事件Click觸發(fā)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
vue的一個(gè)強(qiáng)大功能就是組件化開發(fā),下面這篇文章主要給大家介紹了關(guān)于vue引入組件的幾種方法,文中給出了詳細(xì)的代碼及圖文介紹,需要的朋友可以參考下2024-04-04
vue 運(yùn)用mock數(shù)據(jù)的示例代碼
本篇文章主要介紹了vue 運(yùn)用mock數(shù)據(jù)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要介紹了vue項(xiàng)目中onscroll的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了詳解Vuex下Store的模塊化拆分實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
本篇文章主要介紹了vue-router跳轉(zhuǎn)頁(yè)面的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
Vue中使用 setTimeout() setInterval()函數(shù)的問(wèn)題
這篇文章主要介紹了Vue中使用 setTimeout() setInterval()函數(shù)的問(wèn)題 ,需要的朋友可以參考下2018-09-09
Vue手機(jī)號(hào)正則匹配姓名加密展示功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue手機(jī)號(hào)正則匹配，姓名加密展示,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue中使用elementUI自定義校驗(yàn)及點(diǎn)擊提交不生效問(wèn)題解決辦法
我們?cè)陧?xiàng)目中經(jīng)常會(huì)用到ElementUI的表單驗(yàn)證,下面這篇文章主要給大家介紹了關(guān)于vue中使用elementUI自定義校驗(yàn)及點(diǎn)擊提交不生效問(wèn)題解決的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12