vue 应用部署多级路由js文件加载失败

2024-11-02

多级路由请求js文件路径不对的解决方法

1.问题描述最近因为项目的原因开始学习vue,看了几天教程然后开始撸项目.撸的过程也挺顺利,撸了一个多月项目要上线的时候却出现了问题——用history模式打开网站的时候,从导航点到具体的内容页是正常的,但是一刷新内容页就空白了. 比如:打开网站首页是正常的 http://localhost:8888/ 刷新也没问题. 通过鼠标点击,从导航栏进入商家详情页的某个项目也是正常的 http://localhost:8888/Business/ResetBusiness 但是刷新下页面就空白了.控制

前端设计中关于外部js文件加载的速度优化

在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就像许多网站用Google的CDN库,而我们在墙内访问一样.页面不会出来,一直加载这个js文件,直到浏览器放弃加载为止! <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.a

js文件加载优化

在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. 放置在BODY底部为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到

Django项目静态文件加载失败问题

在我们平时的开发过程中,为了方便调试程序,我们都是打开开发者模式,即Debug=True,当我们正式上线的时候肯定就需要把开发者模式关掉,用uwsgi部署上去以后,突然发现我们平时辛苦做的项目的静态文件没有加载出来,卧槽,怎么办呢...当然你也不用着急,因为在人群中你多看了一眼这篇博客. 1,在静态页面使用下面的方法加载静态资源页面要加载静态文件,而且最好是使用绝对路径,配置如下 2,在settings.py文件中配置在settings.py新增下面代码 STATIC_URL = '/sta

当Django设置DEBUG为False时，发现admin和html的静态资源文件加载失败的解决办法

当Django设置DEBUG为False时,发现admin和html的静态资源文件加载失败,折腾一段时间终于找到解决办法: 1.先在setting文件增加BASE_DIR(项目的路径) BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 2.然后设置:DEBUG = False 3.新增:ALLOWED_HOSTS = ['*'] # 允许IP访问 4.新增 STATIC_URL = '/static/

vue（组件、路由）懒加载

const Login = resolve => require(['@/components/Login'], resolve) //就不用import了 Vue.use(Router) let router = new Router({ // mode: 'history', routes: [ //根据这个遍历得到左边菜单 { path: '/login', name: '登录', component: Login }, (组件.路由)懒加载懒加载也叫延迟加载,即在需要的时候进行加载

js文件加载太慢，JavaScript文件加载加速

原文出自:https://blog.csdn.net/seesun2012 js脚本加载太慢,JavaScript脚本加载加速(亲测有效) 测试背景: JS文件大小:6.1kB 传统形式加载js文件: <script type="text/javascript" src="/js/lib/util/BaseUtil.js"></script> 测试结果1:正常范围:85ms~90ms加载最低耗时:80ms 高速加载js文件: <scri

js 图片加载失败处理方法

在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error([[data],fn])这个函数: $("img").error(function(){ //当图片加载失败时,你要进行的操作 //$(this).attr('src','images/no_pic.jpg'); }); 2.如果项目中没有jQuery这样的插件,可以使用HTML的DOM事

JS文件加载：比较async和DOM Script

async与script动态加载都能使文件异步加载,本文叙述它们对页面渲染和load加载的影响方面. 目前我用demo.js作为执行文件操作.代码: var now = function() { return +(new Date()); } var t_s = now(); while(now() - t_s < 2000) { } 用sleep.php作为请求文件操作.代码: <?php sleep(3); echo 'var bb'; ?> 1. 一般script标签加载 <

【转】html、css、js文件加载顺序及执行情况

原链接:http://www.cnblogs.com/Walker-lyl/p/5262075.html 今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然未弄明白,就在这时我找到了让我恍然大悟的一段话,如下: HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CS

html、css、js文件加载顺序及执行情况

HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件. 3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件. 4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了. 5. 浏览器在代码中发现一个<img>标签引用了一

js文件加载执行顺序

转自:http://blog.163.com/water_down/blog/static/170276590201111711243458/ <script type="text/javascript" src="http://blog.163.com/water_down/blog/a.js"></script> <script type="text/javascript" src="http://bl

vue项目build 之后，css文件加载图片或者字体文件时404的解决。

ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,dist 目录结构如下: dist ├── index.html └── static ├── css ├── img └── js 经常遇见的问题是 css 中 background-image 的相对路径不能正确的引用到 img 文件夹中.但是用 ExtractTextWebpackPlugin 的

element-ui css 文件加载失败（https://unpkg.com/element-ui/lib/theme-chalk/index.css，加载失败）

在main.js文件引入 import Vue from 'vue'; import Element from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Element, { size: 'small', });

JS图片加载失败用默认图片代替

1.onerror 事件会在文档或图像加载过程中发生错误时被触发. 当图片不存在时,将触发onerror,onerror 中img为指定的默认图片. 图片存在则显示正常图片,图片不存在将显示默认. function imgOnerror(img){ img.src="../images/avatars/default.jpg"; img.onerror=null;//控制不要一直跳动 } <img width="90" height="120&qu

JS图片加载失败显示默认图片

代码如下: <div id='photo<%# Container.DataItemIndex+1%>' style="position: absolute; display: none;"> %>').src='images/photox.PNG';this.src='http://net1.sinyi.com.cn/SinyiAP/ShopContact/images/no_photo.jpg'" width="100px"

js模块加载详解

看着java中各种import加载,在回过头来看看javascript还在自己造轮子,写各种XX的模块加载框架,ECMASCRIPT6不知什么时候能够普及.不过DT归DT,该学的还是要学. 一同步加载模式(SMD) 同步顾名思义就是按顺序依次加载执行,比如A模块要引用B模块中的某些函数完成事情,那么此时B模块必须是已经存在页面内存中的,A调用顺利完成执行下面的操作.例子就是A模块直接调用document对象,因为document早已存在浏览器内存中. 同步模块代码实现也比较简单,解析模块路径,

从 bootup.js 学习加载脚本等资源

本文内容如何使用示例参考资料本文的目的在于,通过 bootup.js 的源代码,认识如何从客户端加载服务器的文件,特别是 JavaScript 文件,注入到页面,并存储在本地缓存,以扩展对 JavaScript 的认识,这对你构建自己的 JavaScript 很有意义.尤其是现在的 Web 应用程序,JavaScript 代码越来越多,一个页面有十万行代码都不奇怪,JavaScript 代码不再可能写在一个文件中,而这些 JavaScript 文件加载的顺序至关重要.现在的 Ajax 框

实现简单的 JS 模块加载器

实现简单的 JS 模块加载器 1. 背景介绍按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块的定义,如果您之前有去思考过按需加载的原理,那你可能已经知道按需加载需要依赖一个模块加载器.它可以加载所有的静态资源文件,比如: JS 脚本 CSS 脚本图片资源如果你了解 webpack,那您可以发现在 webpack 内部,它实现了一个模块加载器.模块加载器本身需要遵循一个规范,当然您可

vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)const router = new VueRouter({ routes:[ { path: '/', redirect: '/index' }, //重定向 { path: '/index', component: resolve => require(['./components/index.vue'

vue路由的懒加载

一.懒加载也叫延迟加载或者按需加载,即在需要的时候进行加载, 二.为什么要使用懒加载像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时简单的说就是:进入首页不用一次加载过多资源造成用时过长三.非懒加载的路由配置项四.vue异步组件实

vue 应用部署多级路由js文件加载失败

热门专题