在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 使用vue-cli建立的項(xiàng)目在生產(chǎn)環(huán)境（npm run build）時(shí)的一系列問(wèn)

使用vue-cli建立的項(xiàng)目在生產(chǎn)環(huán)境（npm run build）時(shí)的一系列問(wèn)題

我新學(xué)習(xí)vue,跟著視頻使用vue-cli做了一個(gè)項(xiàng)目,這是我的項(xiàng)目地址,在開(kāi)發(fā)環(huán)境下能夠正常運(yùn)行,但是當(dāng)我使用npm run build打包以后，訪問(wèn)打包后的文件夾dist，結(jié)果有一系列問(wèn)題。

其中部分我嘗試解決了，如通過(guò)修改build/utils.js和config/index.js，解決css和js資源位置不對(duì)的問(wèn)題、css圖片路徑不對(duì)的問(wèn)題，但是還有一系列的問(wèn)題沒(méi)有解決。主要包括項(xiàng)目路徑、vue-router的history模式服務(wù)器配置、圖片路徑錯(cuò)誤等

問(wèn)題一： 項(xiàng)目不在根目錄下時(shí)，vue-router中該如何書(shū)寫(xiě)路徑
描述
本地apache服務(wù)器的根目錄在htdocs文件夾下，而我的項(xiàng)目在其projects/vue-project1/子文件夾中，因此我在項(xiàng)目的src/router/index.js中各個(gè)子頁(yè)面的路徑都以/projects/vue-project1/dist開(kāi)頭，然而如果別人通過(guò)github下載我這個(gè)項(xiàng)目豈不是都得放在projects/vue-project1/目錄下，怎樣才能不受項(xiàng)目的具體位置影響呢？

我在項(xiàng)目文件夾下的src/router/index.js配置各個(gè)頁(yè)面路徑時(shí)，提供了兩個(gè)路徑，在開(kāi)發(fā)和生產(chǎn)環(huán)境下手動(dòng)切換。如何能不手動(dòng)切換、其他下載該項(xiàng)目的人也不必手動(dòng)輸入他自己的文件夾位置呢？
圖片描述

問(wèn)題二： vue-router使用history模式，該如何配置服務(wù)器
描述
我用的是apache2.4 httpd在本機(jī)提供web服務(wù)，如果直接在導(dǎo)航欄輸入主頁(yè)外的子頁(yè)面地址會(huì)顯示404錯(cuò)誤，官網(wǎng)說(shuō)使用history模式時(shí)要配置服務(wù)器。然而如果簡(jiǎn)單地將官網(wǎng)apache服務(wù)器的配置文本（ https://router.vuejs.org/zh-cn/essentials/history-mode.html）粘貼到配置文件conf/http.conf中并不起作用，無(wú)法通過(guò)輸入vue-router中的導(dǎo)航地址直接訪問(wèn)相應(yīng)子頁(yè)面。

另外我希望能通過(guò)github的gh-pages分支創(chuàng)建項(xiàng)目主頁(yè)，對(duì)于由vue-cli使用vue-router的history模式創(chuàng)建的項(xiàng)目是否不可行。
圖片描述

問(wèn)題三：在開(kāi)發(fā)環(huán)境下，如果簡(jiǎn)單使用a標(biāo)簽和相對(duì)路徑也能正確的訪問(wèn)頁(yè)面，但是一旦進(jìn)入生產(chǎn)環(huán)境這種鏈接就失效了，會(huì)報(bào)404錯(cuò)誤。
描述
如圖，這些鏈接是直接用a標(biāo)簽使用相對(duì)路徑寫(xiě)的，沒(méi)有使用router-link，這在開(kāi)發(fā)環(huán)境下正常，但是在生產(chǎn)環(huán)境中就不行了（個(gè)人理解和直接在瀏覽器導(dǎo)航位置直接輸入子頁(yè)面位置返回404是一個(gè)問(wèn)題）。
圖片描述

問(wèn)題四： 輪播圖片從其他頁(yè)面切回來(lái)后無(wú)法找到
描述
主頁(yè)面中的輪播圖在第一次進(jìn)入時(shí)能夠正常顯示，這時(shí)如果我們切換到另一個(gè)頁(yè)面（點(diǎn)擊導(dǎo)航條上產(chǎn)品購(gòu)買頁(yè)面或訂單列表頁(yè)面），再點(diǎn)擊Vue圖標(biāo)切回來(lái)時(shí)，發(fā)現(xiàn)輪播圖的圖片顯示無(wú)法找到（請(qǐng)求圖片的地址錯(cuò)了，應(yīng)該是 http://127.0.0.1/projects/vue-project1/dist/static/img/picx.xxxxxxx.jpg ，缺少了/dist）。
圖片描述

圖片描述

圖片描述

圖片描述

圖片描述

問(wèn)題五：子頁(yè)面的圖片無(wú)法加載
描述
產(chǎn)品購(gòu)買子頁(yè)面的圖片顯示不了。

圖片描述

查看開(kāi)發(fā)窗口，發(fā)現(xiàn)圖片請(qǐng)求的路徑有問(wèn)題。正確位置應(yīng)該是http://127.0.0.1/projects/vue-project1/dist/static/img/pic.xxxxxxx.jpg。

圖片描述

雖然這種問(wèn)問(wèn)題的方式太不像個(gè)程序員。。。在此先謝過(guò)

回答
編輯回答
礙你眼

我嘗試對(duì)這五個(gè)問(wèn)題發(fā)表一下自己的想法，如有不對(duì)還請(qǐng)指正，
問(wèn)題一： 項(xiàng)目不在根目錄下時(shí)，vue-router中該如何書(shū)寫(xiě)路徑

這個(gè)是打包路徑的問(wèn)題，打包路徑和路由無(wú)關(guān)，在config/index.js 中的assetsPublicPath進(jìn)行配置

問(wèn)題二： vue-router使用history模式，該如何配置服務(wù)器

history模式的路由我曾經(jīng)用過(guò)，但是不論是history還是hash，我都沒(méi)有依賴后臺(tái)的處理，history返回不刷新，后來(lái)我用了vue-navigation配合hash使用的，目前還算正常

問(wèn)題三：在開(kāi)發(fā)環(huán)境下，如果簡(jiǎn)單使用a標(biāo)簽和相對(duì)路徑也能正確的訪問(wèn)頁(yè)面，但是一旦進(jìn)入生產(chǎn)環(huán)境這種鏈接就失效了，會(huì)報(bào)404錯(cuò)誤。

我司做的是基于微信端的商城項(xiàng)目，整個(gè)項(xiàng)目都沒(méi)有使用a標(biāo)簽，通過(guò)命名路由，訪問(wèn)內(nèi)部相對(duì)地址，外部地址用window.location.href訪問(wèn)

問(wèn)題四： 輪播圖片從其他頁(yè)面切回來(lái)后無(wú)法找到

這個(gè)問(wèn)題沒(méi)有遇到過(guò)，關(guān)于輪播我用的是vue-awesome-swiper，你的問(wèn)題會(huì)不會(huì)和history路由有關(guān)呢？返回頁(yè)面后重新加載數(shù)據(jù)，是否可行？

問(wèn)題五：子頁(yè)面的圖片無(wú)法加載

//page/Detail.vuejs代碼做如下修改
  export default {
    data () {
      return {
        products: [{
          name: '流量分析',
          path: 'analysis',
          active: false
        },
        {
          name: '數(shù)據(jù)統(tǒng)計(jì)',
          path: 'count',
          active: false
        },
        {
          name: '數(shù)據(jù)預(yù)測(cè)',
          path: 'forecast',
          active: false
        },
        {
          name: '廣告發(fā)布',
          path: 'publish',
          active: false
        }
        ],
        imgMap: {
        //使用路由名稱
          'Count': require('../assets/images/1.png'),
          'Forecast': require('../assets/images/2.png'),
          'Analysis': require('../assets/images/3.png'),
          'Publish': require('../assets/images/4.png')
        }
      }
    },
    computed: {
      productIcon () {
      //使用命名路由
        return this.imgMap[this.$route.name]
        
      }
    }
  }

都是同行多多交流。。

//使用v-for時(shí)最好加上key值
2018年5月19日 03:54