现象: 在浏览器中直接访问www.test.com/api1/login会404.但如果你先访问www.test.com后再点“登录" 跳转到www.test.com/api1/login是正常显示.f5刷新又会出现 404了 这是web单页面开发模式造成的.现在主流的前端框架基本都是单页面的.如:react.vue等. 单页面简单来说就是访问所有资源路径.其实页面内容只有一个(一般是index.html).这个页面中引入的js框架会根据当前访问的url去路由到相应的子页面组件(可以理解为页面片

vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev-server 版本需要从最新版本降低到如下版本,因为开始构建项目所用的插件版本太低(1).npm uninstall webpack-dev-server(2).npm install webpack-dev-server@2.9.1(3).npm run dev==================

vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.

目标 babel 转换ES6 语法 postCss 增强css功能,如自动增加前缀 vue-loader 解析vue 文件 实现基本的vue项目开发环境,打包等 Babel 由于浏览器对es6语法兼容性问题,我们需要用babel 对新语法以及新的api 做代码转换成,也可以理解成Babel是一个工具链,主要帮我们做如下事情 转换语法 Polyfill实现目标环境中通用的功能(通过@ babel / polyfill) 源代码转换(codemods) 安装核心插件 npm install --sa

原因:vue项目的路径时虚拟路径,并不存在,所以用nginx去请求请求不到,所以vue项目做了两部调整: 1.所有的请求后端接口地址前端写死 2.nginx里把所有的接口转发后端删掉,并添加以下内容 location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; }

本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题.(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改.) 1.项目背景分析 本人是Java后台开发,Vue其实使用也没有多久,只能说简单了解.发现问题的时候其实也一头雾水,第一思想就是百度看别人的思路. 1.1 查看项目打包后文件 首先看看项目打包后文件内容,看看有没有什么能突破的地方.文件目录如下: 打眼一看可以发现,主要的可能就是这个index.html文件,内容如下:

背景描述: VUE 项目经过 npm run bulid 生成静态文件上传到服务器后,当我们切换路由并刷新页面,nginx 服务器会报 502 或者 404 错误. 原因分析: 我猜测是因为在 VUE 项目中,路由是利用H5的 history ,看起来页面 url 发生了变化,其实根本就在同一个页面.简而言之,除了根路由之外的路由并不是有效的 url,所以直接刷新页面并不能 get 到对应的内容. 解决方案: 通过 nginx 配置,让所有页面回到根路由. location / { proxy_

vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误. 要想本地正常的调试,解决的办法有三个: 一.关闭谷歌浏览器的同源策略,这样就不存在跨域问题了. window 新建一个 chrome.exe 的快捷方式, 并且关闭所有的chrome浏览器 设置参数,关闭 同源策略 --a

1.node启动vue项目时地址一般都是http://localhost:8080 2.config->index.js 中的host:‘localhost’换成host:‘你的本机ip’就可以了 module.exports = { dev: { host: '192.168.1.100' } }

场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体验不是很好 用vue-router重新路由到当前页面,页面是不进行刷新的. location.reload().这种也是一样,画面一闪,体验不是很好 推荐解决方法: 用provide / inject 组合原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的

场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体验不是很好 用vue-router重新路由到当前页面,页面是不进行刷新的. location.reload().这种也是一样,画面一闪,体验不是很好 推荐解决方法: 用provide / inject 组合原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的

题记:学vue有一段时间了,终于今天下定决心每日书写一篇学习笔记.1.访问node.js官网:https://nodejs.org/en/ 下载对应安装包.2.安装完成,在终端输入 : node -v 如果返回版本号,代表安装成功.建议安装之前给目录权限,至于怎么给目录权限,这里不做说明,网上有很多资料.3.安装淘宝镜像至于为何要安装淘宝镜像,因为有帐幕阻挡我们访问npm 的境外网站:好奇心强的朋友可以进行尝试,运气差的要很久.很久.有可能一晚上时间,别问我怎么知道的.废话少说,在终端输入: n

Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api...废话不多说了,把我踩过的坑,在这里跟大家说说,希望对初学者有所帮助.ps:高手请绕道. 说明:此文章参考了网上一些前人的技术分享,自己拿过来总结一下.此文章是基于webpack构建的vue项目,并实现简单的单页面应用.其中利用到的相关技术会简单

很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互.按照之前运行非常流畅的配置走一遍,打包遇到各种坑.只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了.看来每日沉迷项目,已经跟不上节奏了.这里记录一下遇到的问题以及解决方案. 1.webpack 4.x 插件 extract-text-webpack-plugin (node:2628) DeprecationWarning: Tapable.plugin is deprecated. Use ne

vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/xx.png, 我们希望改为 https://oss.xx.com/img/xx.png 思路: 了解到 publicPath 可以修改项目内静态文件的引用路径, 尝试这样修改 module.exports = { .. publicPath:'https://oss.xx.com/img' ..

今天运行项目,项目一直好好的却突然运行时报错,如下: 是引入文件报错问题,回头查看了一下文件在main.js的引入: import '@/assets/styles/custom.less'; 文件引入并没有问题. 百度了一下是说相关依赖babel-loader和vue-loader没有找到,但是npm i babel-loader vue-loader依然报错此信息. webpack的配置文件正常情况下已经配置好可以引入css,less等文件,如果出现报错有两种方式解决:第一是用src形式引入

序 现在依旧记得第一次看到webpack3.x 版本配置时候的状态  刚开始看到这些真的是一脸懵.希望这篇文章能帮到刚开始入门的同学. webpack 是什么? webpack是一个模块化打包工具,webpack 通过入口分析项目结构,找到JavaScript模块以及一些不能直接在浏览器上运行的语言.语法等 如(scss.ts.es6+等),并将其打包成可以直接在浏览器运行的js,以及压缩.加密.按需加载等. 相关概念 Entry:入口,webpack执行构建的第一步将从Entry开始,可理解为

简单的目录结构: |-index.html |-main.js 入口文件 |-App.vue vue文件,官方推荐命名法 |-package.json 工程文件(项目依赖.名称.配置) npm init --yes 生成 |-webpack.config.js webpack配置文件 webpak准备工作: cnpm install webpack --save-dev cnpm install webpack-dev-server --save-dev App.vue -> 变成正常代码 vu

第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据sessionstorage的特性,做一下各个方法的封装: const ls = window.sessionStorage; export default { getItem(key) { try { return JSON.parse(ls.getItem(key)); } catch (err) { ret

vscode下载eslint插件 vscode进行设置 找到settings.json 在里面写入如下内容进行保存 {     "eslint.autoFixOnSave": true,     "eslint.validate": [         "javascript",         {             "language": "vue",             "autoF