使用vue项目,线上部署的时候,访问首页以及通过路由打开二级页面没有问题,但是一刷新就出现404现象 因为刷新页面时访问的资源在服务端找不到,因为vue-router设置的路由不是真实存在的路径. 解决办法是:在nginx.conf配置修改如下: location / { root html; try_files $uri $uri/ @router; index index.html index.htm; } location @router { rewrite ^.*$ /index.htm

问题描述:前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所有的二级页面打开后,再次刷新,就会出现404现象!如下: 问题原因:刷新页面时访问的资源在服务端找不到,因为vue-router设置的路径不是真实存在的路径.如上的404现象,是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在,这些访

一.前提 1. 安装了node.js. 2. 安装了npm. 3. 检查是否安装成功: 打开cmd,输入node,没有报“node不是内部或外部命令”表示安装成功node.js. 打开cmd,输入npm,没有报“npm不是内部或外部命令”表示安装成功node.js. 4. node.js下载地址:http://pan.baidu.com/s/1eRW4hiU.用这个安装包安装会默认帮你安装npm. 注意:由于webpack是一个基于node的项目,所以必须安装node.js和npm 二.创建项目

参考:https://segmentfault.com/a/1190000007630677 自己gitHub项目地址:https://github.com/shixiaoyanyan/vue-workList-demo 前言 我们将会选择使用一些vue周边的库vue-cli, vue-router,vue-resource,vuex 1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请求我们的node服务端5.使

vue2.0 构建单页应用最佳实战   前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使用 vue-router 实现单页路由3.使用 vuex 管理我们的数据流4.使用 vue-resource 请求我们的 node 服务端5.使用 .vue文 件进行组件化的开发PS:本文 node v6.2.2 npm v3.9.5 vue v2.1.0 vue-router v2.0.3 vue

作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路由的时候做个处理,如下: import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); Vue.use(Router) export default new Router({ routes: [ { path: '/',

坑爹的ie,作为小组leader,尼玛,小伙伴儿们不乐意做的事情,我来做好了..心累... 如果,各位同学有定制开发ie6-8版本的需求,还是尽量不要用单页应用模式了,也不要用avalon这类mvvm框架了,也不是不能做,这种mvvm模式写起来还是挺爽的. 只是一旦在 ie6上遇到奇葩问题,你会很闹心,这个风险在工期约束比较紧的情况下,尤其需要注意. 基础框架 本项目为单页应用,框架搭建为:avalon(双向数据绑定)+requireJS(js及模板动态加载)+director(路由管理) av

vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. 学会工具并不难,思考如何运用这些工具,才是编程或者工作中最难的部分. 我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支. ========================== 动态路由 在路由某部分里加入[ : ],就成为动态路由如:/user/:id/,那么路由

vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. 我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支. ========================== 经过几天的学习,组件的应用已入门. 组件的内容还有很多: 1.组件内部各类对象 ( $root $parent ).依赖注入.事件监听.循环引用.控制更新等.

vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. 学会工具并不难,思考如何运用这些工具,才是编程或者工作中最难的部分. 我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支. ========================== 导航守卫是 vue 中很关键的内容之一.路由是否能够切换,怎么切换,都由它来把关 ( 用

引言 前进刷新,后退不刷新,是一个类似app页面的特点,要在单页web应用中做后退不刷新,却并非一件易事. 为什么麻烦 spa的渲染原理(以vue为例):url的更改触发onHashChange/pushState/popState/replaceState,通过url中的pathName去匹配路由中定义的组件,加载进来并实例化渲染在项目的出口router-view中. 换言之,一个实例的解析渲染意味着另外一个实例的销毁,因为渲染出口只有一个. keep-alive为什么不行?因为keep-al

一.背景 先简单介绍一下现在项目情况:前后端分离,后端服务是Java写的,前端是Vue+ElementUI. 最近的一个需求是:通过后端Api去获取前端路由表,原因是每个登录角色对应的前端路由表可能是不一样的(权限问题) 二.遇到的问题 因为前端Vue+ElementUI项目是单页应用——即只有一个index.html页面,如果路由从远程获取的话,每次F5或点击刷新按钮刷新页面的时候,就会找不到对应的路径而报404错误 三.解决方案 1.通过api远程获取路由,然后在前端生成对应路由 /* 将

server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打包后的dist location / { try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404 index index.html index.htm; } #对应上面的@router,主要原因是路由的路径资源并不是

在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode: 'history', base: __dirname, scrollBehavior, routes: [index, blog, project, about, list] }) 那么,当我们 npm run build 完成并部署到服务器后,刷新某个路由下的页面,会出现 404 或者 502

将DotNet Core2.0项目部署在Ubuntu上并且运行后,可以用localhost:5000来访问. 但是如果这时候用外网来访问就不行了. 这时候就有两种解决方案,第一种是用Nginx做代理实现访问,另一种是修改程序的Program.cs. 在这里介绍的是第二种解决方案. public static IWebHost BuildWebHost(string[] args) => WebHost.CreateDefaultBuilder(args) //如果不配置下面这条信息,会导致无法直

1.ASP.NET Core 是一个跨平台的高性能开源框架,可以部署到Linux上,那项目部署在Linux上有哪些好处呢? 1.linux硬件需求小,大部分版本免费,成本低. 2.linux的用户管理严格,病毒难以破坏. 3.linux是模块化的,可裁减,出现问题只要关闭一个模块,windows只有微软自己才会裁减. 4.linux是多用户多进程系统,适合做服务器. 5.linux上还有一个最大的好处,可以使用docker容器,Docker是一个开源的应用容器引擎,开发者可以打包他们的应用及依赖

vue 项目 版本 Vue Cli 3.3 官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html 因为本项目部署在 Apache Tomcat上 所以 以Apache为例 修改Apache配置 找到 #LoadModule rewrite_module modules/mod_rewrite.so 这一行 把#去掉 然后保存配置 重启服务 在根目录下创建文件 ./htaccess 把下面代码放进去 <IfModul

1.创建vue.config.js 主要是负责做设置的 2.修改vue.config.js 参考官方说明: 注意:对于本地开发的同学要注意,你之前在处理网络请求时是在8080端口下请求,现在如果换成了开发服务器 有可能端口会变化,服务器端要记得解决好跨域问题 3.打包 执行 npm run build

最原始的编程方式,业务逻辑混杂在html中 <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <%@ page import="java.sql.*" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> &l

链接: https://www.tuicool.com/articles/me6RJfF

今天遇到了一个问题,在routes/web.php中配置了路由,但始终无法访问该路由,一直报404. Route::resource('gift_packs', 'GiftPacksController', ['only' => ['index', 'show', 'create', 'store', 'update', 'edit', 'destroy']]); Route::get('gift_packs/test', 'GiftPacksController@test')->name('