" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue在外部配置打包文件夾名稱(chēng)和url地址前綴

 更新時(shí)間：2022年06月24日 11:05:33   作者：~疆  
本文主要介紹了Vue在外部配置打包文件夾名稱(chēng)和url地址前綴，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

在public中添加以下兩個(gè)js文件 

config_build.js: 

module.exports = {
 
    //打包文件夾名
    OUTPUT_DIR: 'test',
 
    //瀏覽器url地址前綴。需要同步更改config_settings.js中的ROUTE_PREFIX
    ROUTE_PREFIX: '/test/'
}

vue.config.js:

const config_build = require('./public/config_build')
 
module.exports = {
    publicPath: config_build.ROUTE_PREFIX,
    outputDir: config_build.OUTPUT_DIR,
}

config_settings.js:

window.config_settings = {
    //瀏覽器url地址前綴。需要同步更改config_build.js中的ROUTE_PREFIX
    ROUTE_PREFIX: '/test/',
}

注意：在npm run build打包之前，需要先配置以上文件，使打包內(nèi)容生效

1、配置瀏覽器地址前綴，需要修改同時(shí)修改config_build.js中的ROUTE_PREFIX和config_settings中的ROUTE_PREFIX，并且這兩個(gè)值需要保持一樣。

  • http://localhost:8080               則 ROUTE_PREFIX:"" 或ROUTE_PREFIX:"/"
  • http://localhost:8080/test        則 ROUTE_PREFIX:"/test"
  • http://localhost:8080/test/a     則 ROUTE_PREFIX:"/test/a"

 2、配置打包文件夾名稱(chēng)，只需配置config_build中的ROUTE_PREFIX即可。

3、如果打包出來(lái)的項(xiàng)目是放在Apache中，一定要記得添加.htaccess文件，防止刷新報(bào)404錯(cuò)誤。參考：

Vue.js項(xiàng)目在apache服務(wù)器部署問(wèn)題

造成原因vue 路由的URL有兩種模式，一種是 hash，一種是history ，history 模式更好看一些，并且這種模式充分利用 history.pushState API 來(lái)完成 URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面。在使用hisory模式時(shí)，由于地址并不是真實(shí)存在，那么在刷新的情況下，這個(gè)會(huì)報(bào)404錯(cuò)誤。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

其中，如果

  • http://localhost:8080               則 RewriteRule . /index.html [L]
  • http://localhost:8080/test        則 RewriteRule . /test/index.html [L]
  • http://localhost:8080/test/a     則 RewriteRule . /test/a/index.html [L]

到此這篇關(guān)于Vue在外部配置打包文件夾名稱(chēng)和url地址前綴的文章就介紹到這了,更多相關(guān)Vue打包文件夾名稱(chēng)和url地址前綴內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vant組件表單外部的button觸發(fā)form表單的submit事件問(wèn)題

    vant組件表單外部的button觸發(fā)form表單的submit事件問(wèn)題

    這篇文章主要介紹了vant組件表單外部的button觸發(fā)form表單的submit事件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-06-06
  • vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解

    vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解

    今天小編就為大家分享一篇vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • vue-cli腳手架引入圖片的幾種方法總結(jié)

    vue-cli腳手架引入圖片的幾種方法總結(jié)

    下面小編就為大家分享一篇vue-cli腳手架引入圖片的幾種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-03
  • vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作

    vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作

    這篇文章主要介紹了vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11
  • vue二次封裝一個(gè)高頻可復(fù)用組件的全過(guò)程

    vue二次封裝一個(gè)高頻可復(fù)用組件的全過(guò)程

    在開(kāi)發(fā)Vue項(xiàng)目我們一般使用第三方UI組件庫(kù)進(jìn)行開(kāi)發(fā),但是這些組件提供的接口并不一定滿(mǎn)足我們的需求,這時(shí)我們可以通過(guò)對(duì)組件庫(kù)組件的二次封裝,來(lái)滿(mǎn)足我們特殊的需求,這篇文章主要給大家介紹了關(guān)于vue二次封裝一個(gè)高頻可復(fù)用組件的相關(guān)資料,需要的朋友可以參考下
    2022-10-10
  • 解決Vite打包后直接使用瀏覽器打開(kāi),顯示空白問(wèn)題

    解決Vite打包后直接使用瀏覽器打開(kāi),顯示空白問(wèn)題

    這篇文章主要介紹了解決Vite打包后直接使用瀏覽器打開(kāi),顯示空白問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue中使用crypto-js AES對(duì)稱(chēng)加密算法實(shí)現(xiàn)加密解密

    Vue中使用crypto-js AES對(duì)稱(chēng)加密算法實(shí)現(xiàn)加密解密

    ?在數(shù)字加密算法中，通過(guò)可劃分為對(duì)稱(chēng)加密和非對(duì)稱(chēng)加密，本文主要介紹了Vue中使用crypto-js AES對(duì)稱(chēng)加密算法實(shí)現(xiàn)加密解密，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue.js2.0點(diǎn)擊獲取自己的屬性和jquery方法

    vue.js2.0點(diǎn)擊獲取自己的屬性和jquery方法

    下面小編就為大家分享一篇vue.js2.0點(diǎn)擊獲取自己的屬性和jquery方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • vue中的$含義及其用法詳解($xxx引用的位置)

    vue中的$含義及其用法詳解($xxx引用的位置)

    $是在vue中所有實(shí)例中都可用的一個(gè)簡(jiǎn)單約定,這樣做會(huì)避免和已被定義的數(shù)據(jù),方法,計(jì)算屬性產(chǎn)生沖突,下面這篇文章主要給大家介紹了關(guān)于vue中$含義及其用法的相關(guān)資料,需要的朋友可以參考下
    2023-04-04
  • vue中通過(guò)使用$attrs實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞功能

    vue中通過(guò)使用$attrs實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞功能

    組件之間傳遞數(shù)據(jù)的方式有很多種，之所以有這么多種方式，是為了滿(mǎn)足在不同場(chǎng)景不同條件下的使用。這篇文章主要介紹了vue中通過(guò)使用$attrs實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞,需要的朋友可以參考下
    2019-09-09

最新評(píng)論