IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue在外部配置打包文件夹名称和url地址前缀 -> 正文阅读

[JavaScript知识库]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服务器部署问题_~疆的博客-CSDN博客_apache部署vue项目造成原因vue 路由的URL有两种模式,一种是 hash,一种是history ,history 模式更好看一些,并且这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。在使用hisory模式时,由于地址并不是真实存在,那么在刷新的情况下,这个会报404错误。对于这个问题,我们只需要在服务器配置如果URL匹配不到任何静态资源,就跳转到默认的index.html解决方案Apache安装目录中打开httpd.conf 文件将默认注释的https://blog.csdn.net/qq_40323256/article/details/123247284

<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]
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-25 18:01:20  更:2022-06-25 18:01:29 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年6日历 -2024/6/18 14:34:59-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码