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