Vue在外部配置打包文件夾名稱和url地址前綴

更新時間：2022年06月24日 11:05:33 作者：~疆

本文主要介紹了Vue在外部配置打包文件夾名稱和url地址前綴，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

在public中添加以下兩個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、配置瀏覽器地址前綴，需要修改同時修改config_build.js中的ROUTE_PREFIX和config_settings中的ROUTE_PREFIX，并且這兩個值需要保持一樣。

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

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

3、如果打包出來的項目是放在Apache中，一定要記得添加.htaccess文件，防止刷新報404錯誤。參考：

Vue.js項目在apache服務器部署問題

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

<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]

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

您可能感興趣的文章:

淺談Vue的響應式原理
讓我們來回顧下Vue的介紹,可以發(fā)現(xiàn)Vue 最顯著的一個功能是響應系統(tǒng)。那么它的實現(xiàn)原理有又是如何呢?下面小編和大家來一起學習一下
2019-05-05
Vue?配置代理詳情
這篇文章主要介紹了Vue?配置代理詳情，文章圍繞主題的相關資料展開詳細內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下，希望對你的學習有所幫助
2022-04-04
vue實現(xiàn)本地存儲添加刪除修改功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)本地存儲添加刪除修改功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
Vue-cli項目部署到Nginx服務器的方法
這篇文章主要介紹了Vue-cli項目部署到Nginx服務器的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-11-11
Vue不同項目之間傳遞、接收參數(shù)問題
這篇文章主要介紹了Vue不同項目之間傳遞、接收參數(shù)問題,主要針對是登錄操作，我們?yōu)榱送瓿蒘SO(Single Sign On)的效果，認證和授權在UC完成，用戶發(fā)起資源請求，服務網(wǎng)關會進行過濾，本文給大家介紹的非常詳細，需要的朋友可以參考下
2023-04-04
vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作
這篇文章主要介紹了vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
利用VUE框架，實現(xiàn)列表分頁功能示例代碼
本篇文章主要介紹了利用VUE框架，實現(xiàn)列表分頁功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-01-01
教你如何使用VUE組件創(chuàng)建SpreadJS自定義單元格
這篇文章主要介紹了使用VUE組件創(chuàng)建SpreadJS自定義單元格的方法，通常我們使用組件的方式是，在實例化Vue對象之前，通過Vue.component方法來注冊全局的組件,文中通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧
2022-01-01
Vue3 組件間通信之mitt實現(xiàn)任意組件間通信的步驟
mitt 主要有4個API：emit（觸發(fā)某個事件）、on（綁定事件）、off（解綁某個事件）、all（獲取所有綁定的事件）,這篇文章主要介紹了Vue3 組件間通信之mitt實現(xiàn)任意組件間通信,需要的朋友可以參考下
2024-05-05
解決vue無法設置滾動位置的問題
這篇文章主要介紹了解決vue無法設置滾動位置的問題 ,需要的朋友可以參考下
2018-10-10