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打包之前，需要先配置以上文件，使打包内容生效

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 跳转而无须重新加载页面。在使用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地址前缀内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vant组件表单外部的button触发form表单的submit事件问题
这篇文章主要介绍了vant组件表单外部的button触发form表单的submit事件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue项目中跳转到外部链接的实例讲解
今天小编就为大家分享一篇vue项目中跳转到外部链接的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue-cli脚手架引入图片的几种方法总结
下面小编就为大家分享一篇vue-cli脚手架引入图片的几种方法总结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vant组件中 dialog的确认按钮的回调事件操作
这篇文章主要介绍了vant组件中 dialog的确认按钮的回调事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue二次封装一个高频可复用组件的全过程
在开发Vue项目我们一般使用第三方UI组件库进行开发,但是这些组件提供的接口并不一定满足我们的需求,这时我们可以通过对组件库组件的二次封装,来满足我们特殊的需求,这篇文章主要给大家介绍了关于vue二次封装一个高频可复用组件的相关资料,需要的朋友可以参考下
2022-10-10
解决Vite打包后直接使用浏览器打开,显示空白问题
这篇文章主要介绍了解决Vite打包后直接使用浏览器打开,显示空白问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue中使用crypto-js AES对称加密算法实现加密解密
在数字加密算法中，通过可划分为对称加密和非对称加密，本文主要介绍了Vue中使用crypto-js AES对称加密算法实现加密解密，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue.js2.0点击获取自己的属性和jquery方法
下面小编就为大家分享一篇vue.js2.0点击获取自己的属性和jquery方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue中的$含义及其用法详解($xxx引用的位置)
$是在vue中所有实例中都可用的一个简单约定,这样做会避免和已被定义的数据,方法,计算属性产生冲突,下面这篇文章主要给大家介绍了关于vue中$含义及其用法的相关资料,需要的朋友可以参考下
2023-04-04
vue中通过使用$attrs实现组件之间的数据传递功能
组件之间传递数据的方式有很多种，之所以有这么多种方式，是为了满足在不同场景不同条件下的使用。这篇文章主要介绍了vue中通过使用$attrs实现组件之间的数据传递,需要的朋友可以参考下
2019-09-09