小谢第29问:Vue项目打包部署到服务器上,调接口就报js,css 文件404

摘要:
1.对于publicPath路径的问题,首先查看构建后的包,确认是否是publicPath路径配置的原因,是否有静态文件夹,以及是否需要在此文件夹下配置404js、css2和history模式。vue中img访问的路径是一个固定的字符串

1、publicPath路径的问题,先看下build之后的包确认下是不是publicPath路径配置的原因,有没有static这个文件夹,以及这个文件夹下边有没有这些404的js和css

2、history模式需要配置nginx支持

3、在dev环境下测试没有问题,但是npm run build后图片的路径找不到,对于图片路径的设置,只可以有以下三种方式

1,vue里的img访问的路径是一个固定的字符串,这种采用相对路径../../xxx/../static 找到static的图片路径

<img src="http://t.zoukankan.com/static/images/i-logo.png" alt="">

  

2,,vue里的img访问的路径是一个从网络获取的字符串,这种不会经过webpack的url-loader处理的应采用当前路径./static 找到static的图片路径

{"name": "视图库", "icon": "./static/app-portal-baseui/images/i-app1.png", "id": "shituku","url": "http://172.16.64.211:8080/#/dashboardManage?token=111",
   "fields":[
      {"name":"openMode","description":"tab"}
   ]
},

  

 

3,scss的背景图片,这种是static/theme/light/index.scss相对与static的路径,所以直接写成 ../../../static即可,一定是三个 ../

background: url("../../../static/app-portal-baseui/images/tech-qh-bg.png") no-repeat;

  

 

对scss中的图片路径, 如果scss文件的层级较深,直接写路径编辑前会提示错误(运行其实不会报错),可以在common/var.scss中定义一个图片的变量,然后在scss使用变量即可

小谢第29问:Vue项目打包部署到服务器上,调接口就报js,css 文件404第1张

小谢第29问:Vue项目打包部署到服务器上,调接口就报js,css 文件404第2张

免责声明:文章转载自《小谢第29问:Vue项目打包部署到服务器上,调接口就报js,css 文件404》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇使用派生镜像(qcow2)如何去掉Intellij IDEA过多的警告 设置警告级别下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JS中数组的方法

在js中数组的重要性不言而喻,下面就来介绍一些数组的常用方法 一、基本方法 1.增 ①. arr.push() 在数组的末尾添加一个元素。 var arr = [1,2,3,4]; var newArr = arr.push(8); console.log(arr);  //(5) [1, 2, 3, 4, 8] 该方法会改变原数组,在数组...

VUEX

在Vue中组件之间的共享数据的方式:1、父组件向子组件传值:v-bind 属性绑定2、子组件向父组件传值:v-on 事件绑定3、兄弟组件之间进行传值:EventBus$on 接收数据的那个组件$emit 发送数据的那个组件 上面的3种方式适用于小项目中的组件通信,当项目变的庞大的时候,就有些力不从心了。 上图中,左侧图片是未使用vuex进行数据传递的。当...

一篇文章教会你创建vue项目和使用vue.js实现数据增删改查

【一、项目背景】 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品、修改商品价格、删除商品、查询商品,我们应该关注这些数据的操作和处理。 【二、项目目标】 主要有以下5个目标: 1、如何创建vue项目。 2、数据添加方法:获取到id和name在data上面获取,组织一个对象,把对象通过数组的相关方法,添加到当前dat...

JS获取IMG图片高宽

前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题。不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值;趁今天有空我就写了几个demo测试了下,找了下原因;且听我细细说来,如有哪里说的不对的,欢迎拍砖~~~  首先获取高宽的方法具我所知有:obj.style.width(heig...

Vue全家桶系列【vue3更新中.....】

一. 简介  1. 说明   Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 V...

JS和JSP的区别

js是javascript的缩写。以下是JSP与baiJS的区别和联系:du 名字:JS:JavaScript JSP:Java Server Pages 执行过程:zhiJSP先翻译,翻译成Servlet执行如: test.jsp 要变成 test_jsp.java 然后dao编译成 test_jsp.class而 test_jsp.java 本身就是一...