前言:

  因为要同时部署两个项目,有一个是部署到域名下面的子目录下,如:https://xxx.com/siot-admin

  vue 项目中使用axios请求了本地项目的static文件夹下的json文件,使用npm run build 打包后,json文件请求不到报404:

  

  

解决办法:

Vue-cli打包后部署到子目录下路径问题

举例,若需要部署到www.***.com/catalog1/catalog2/下,需要更改

  1. config/index.js文件中,buildassetsPublicPath属性为'/catalog1/catalog2/',如下:

build: {
assetsPublicPath: '/catalog1/catalog2/',

  默认情况下该值为'/'(该属性目测是webpack打包时的文件引用路径的基础路径,一级域名下这里应该写成“./”)。

  2.修改路由base属性为'/catalog1/catalog2/',如下:

export default new Router({
// mode: 'history',
base: '/catalog1/catalog2/', //这个一定要加上
routes: [
{
path: '/',
name: 'indexContent',
component: indexContent
}
]
})

其中mode设置为'history'可清除路径中的#(本地测试有效)。
设置完成后重新打包。

问题二: static里面的 font字体在打包后也找不到了

这个字体文件报404

解决办法:

在build/utils文件中的下图所示位置添加../../公共路径   

这样打包的iconfont字体文件路径时就会加上../../了。引用就没问题了。而不再需要手动更改css文件中的路径。

axios请求本地的json文件在打包部署到子目录域名下,路径找不到的更多相关文章

  1. 解决axios请求本地的json文件在打包后路径出错问题

    vue 项目中使用axios请求了本地项目的static文件夹下的json文件,使用npm run build 打包后,在Hbuilder编辑器打开,页面报错404: 在浏览器打开的路径 http:/ ...

  2. ajax和axios请求本地json数据对比

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...

  3. 谷歌通过ajax获取本地JSON文件,为什么会显示跨域?转载的

    在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 谷 ...

  4. 谷歌通过ajax获取本地JSON文件,为什么会提示跨域?

    在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 下 ...

  5. 读取本地的json文件

    最近写项目需要读取本地的json文件,然后悲催的发现前端新手的我居然不会,查查找找发现这东西并不难,但是应该是比较常用的,毕竟json太好用了! 我是直接用的jquery实现的,但是Ajax也可以,不 ...

  6. vue使用axios请求本地json文件出现404

    之前的路径是这么写的,一直出现404,后来发现必须是http的才可以,这样是无法请求的 把路径改为以下   位置根据json文件决定,但是必须是http://localhost:断口号

  7. axios请求本地json

    在vux的项目中 1,首先,json文件的位置: 原因: 访问服务器文件,应该把 json文件放在最外层的static文件夹,这个文件夹是vue-cli内置服务器向外暴露的静态文件夹   2,一定要用 ...

  8. vue脚手架用axios请求本地数据

    首先需要声明的是:本地请求,不用考虑跨域问题,这适用刚入坑的前端小白看,小白在做自己的项目时,通常都是用自己写的json数据,之后用axios请求过来,渲染到页面上. 1.cnpm install a ...

  9. 从MongoDB里面取得json格式的数据,然后存为本地的json文件,然后再从json读取变为dict

    帮宣传下彩印网(www.caiyin.com) 有印刷,广告等等方面的需求就找这个网站吧,没错的. 天气预报在MongoDB中的天气预报的存储方式是: /* 1 */ { "_id" ...

随机推荐

  1. SpringCloud Ribbon的分析

    Spring Cloud Ribbon主要用于客户端的负载均衡.最基本的用法便是使用RestTemplate进行动态的负载均衡.我们只需要加入如下的配置便能完成客户端的负载均衡. @Configura ...

  2. Spring Boot 系列总目录

    一.Spring Boot 系列诞生原因 上学那会主要学的是 Java 和 .Net 两种语言,当时对于语言分类这事儿没什么概念,恰好在2009年毕业那会阴差阳错的先找到了 .Net 的工作,此后就开 ...

  3. springboot集成下,mybatis的mapper代理对象究竟是如何生成的

    前言 开心一刻 中韩两学生辩论. 中:端午节是属于谁的? 韩:韩国人! 中:汉字是谁发明的? 韩:韩国人! 中:中医是属于谁的? 韩:韩国人! 中:那中国人到底发明过什么? 韩:韩国人! 前情回顾 M ...

  4. 痞子衡嵌入式:第一本Git命令教程(3)- 变动(status/diff)

    今天是Git系列课程第三课,前两课我们都是在做Git仓库准备工作,今天痞子衡要讲的是如何查看Git空间内发生的改动. 本地有了仓库,我们便可以在仓库所在目录下做文件增删改操作,为了确定改动操作的正确性 ...

  5. 第48章 UserInfo端点(UserInfo Endpoint) - Identity Server 4 中文文档(v1.0.0)

    UserInfo端点可用于检索有关用户的身份信息(请参阅规范). 调用者需要发送代表用户的有效访问令牌.根据授予的范围,UserInfo端点将返回映射的声明(至少需要openid作用域). 示例 GE ...

  6. Linux 安装composer

    wget https://getcomposer.org/installer //下载一个脚本文件 php installer //php执行下这个php脚本(虚拟机我没装环境.以下截图有操作流程) ...

  7. 纯css做幻灯片效果

    css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...

  8. Object.keys 及表单清空

    Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性.这些属性的顺序与手动遍历该对象属性时的一致. // simple array var ar ...

  9. vue+vuecli+webapck2实现多页面应用

    准备工作 在本地用vue-cli新建一个项目,首先安装vue-cil,命令: npm install -g vue-cli 新建一个vue项目,创建一个基于"webpack"的项目 ...

  10. Ansible第一篇:介绍及安装

    Ansible介绍 Ansible是个什么东西呢?官方的title是"Ansible is Simple IT Automation"--简单的自动化IT工具.ansible基于P ...