" />

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

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

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

在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、如果打包出來的項(xiàng)目是放在Apache中，一定要記得添加.htaccess文件，防止刷新報404錯誤。參考：

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

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

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

相關(guān)文章

最新評論