Vue打包文件放在服务器，浏览器存在缓存问题的解决

Vue打包文件放在服务器后，浏览器存在缓存问题

每次打包更新版本发到服务器上,导致偶尔会出现不能即使更新最新代码,浏览器存在缓存的问题. 解决方法:找到webpack .prod.conf.js 1.定义版本变量: const Version = new Date().getTime(); // 这里使用的是时间戳来区分 output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].'+_Version+'js'), c…

Vue打包文件放在服务器，浏览器存在缓存问题的解决

在入口文件index.html添加 <meta http-equiv="pragram" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="expires" content="0&qu…

nginx处理vue打包文件后的跨域问题

起因在vue文件打包后,项目脱离了vue配置的反向代理配置,还是会报跨域的错误,或者直接打不开本地文件, 但是此刻我们想打开打包后的文件,测试一下文件有没有错误,因为经常会存在开发阶段没有问题,打包后项目就各种问题,此时我们可以利用nginx处理跨域,其实vue配置也是利用的这个 nginx处理vue打包文件后的跨域问题安装先在官网下载nginx 注意版本运行的环境我这里用的是windows 然后解压下来就好了 vue修改配置在vue项目文件中也是利用反向代理处理的 proxyTab…

使用node-static运行vue打包文件dist

vue打包后的文件dist,如果想上线之前查看效果,方法如下: npm install -g node-static 进入到dist文件夹,运行static命令打开上面地址…

Vue打包后放到服务器出现Loading chunk {n} failed 错误

导航栏点击切换时会出现Loading chunk {n} failed ,刷新之后便不会出现.而且n在最新的build的文件中,n没有存在偶然一次发现,项目更新迭代开发时上传测试环境后就会出现,当我们打包后某些js文件会改变,再上传到服务器后,由于浏览器缓存问题,用户在访问的时候还会再访问之前的js文件.就会出现Loading chunk {n} failed这种报错, 思考到了路由懒加载的情况下,访问当前应用进行路由跳转时都是实时动态的从服务器上拉取相应模块的js文件,这时候我们改完代码…

vue 打包部署到服务器上配置nginx访问

坑一 css,js资源引入不正确 webpack配置文件config/index.js 需要更改: 方法一当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径问题描述一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径. 解决办法打开…

Vue 打包部署到服务器后，非主页刷新后出现404问题解决

开心把项目部署到服务上,从头到尾点了一遍,发现没有问题,以为就可以大功告成,没想到刷新页面时出现被破泼了一脸的凉水,更奇怪的事首页没有问题,只有其他页面出现,在调戏了很久的度娘后,才从坑里跳出来,以下是我自己跳坑的方法: 我用的是phpStudy执行环境,有点low,小项目啦,访问量也不多. 首先参考牛人的技术博客得到启示. 打开Apache的rewrite功能: 1)在windows环境下: 打开您的apache安装目录 “/apache/conf/” 下的 httpd.conf 文件…

vue打包之部署在非根路径下的三两事

首先,感叹一下,2019年已经过去一半,想想自己做了些什么,好像也没做什么. 今天试着配一个nginx,以前的nginx都是指向的/根路径,今天的nginx指向的非/根路径,遇到许多问题的,总结总结. 老规矩,先来点示例代码: nginx: server { listen ; server_name domain.com; location /path { alias "/your-project-file"; index index.html; try_files $uri $uri…

Vue打包优化之分析工具webpack-bundle-analyzer

// 1. 安装 cnpm install webpack-bundle-analyzer --save-dev // 2. 在/build/webpack.prod.conf.js文件中引入 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // 然后配置一下: plugins: [ new BundleAnalyzerPlugin() ] // 3. 在package.js…

vue中打包之后的dist文件不放在服务器的根目录下

在工作当中,我使用webpack打包的dist,由于管理的问题,无法被放在服务器根目录下 ,但在目前的vue配置,dist不放在根目录下,访问页面会成为一片空白,于是便要对vue框架的config进行配置修改. 首先对vue中config文件夹的index.js做配置,将build.assetsPublicPath由绝对路径改为相对路径 build: { // Template for index.html index: path.resolve(__dirname, '../dist/inde…

为何webpack打包后的文件要放在服务器上才能运行

为何会有此问: 在刚开始使用vue-cli时还不知道打包后的文件要在服务中才能运行,直接点开后发现页面白板,请教大神后得知要起一个服务才能运行起来,当时我脑子中的逻辑是这样的: 因为:js代码是由浏览器解释运行的,web服务器可以编译nodejs代码又因为: 在项目中用到的只有 js 和 nodejs,nodejs要在服务中运行所以:在webpack打包后的文件中是有nodejs的今天脑子突然一闪又想到了这个问题,专门去看了打包后的文件,经过一番搜查后发现,打包后的文件中他喵的就没有nod…

vue+ elementUI 打包发布到服务器后，element-icons.woff文件404

vue项目打包部署到服务器,静态资源文件404 js文件404问题原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错解决办法:修改config/index.js文件,将 assetsPublicPath修改为'./' element-icons.woff 文件 404 1.从下图可以看到,使用url-loader处理后的文件是在static目录下生成fonts目录下的文件.全部样式文件打包在css目录下app.****…

nginx配置解决vue单页面打包文件大，首次加载慢的问题

cnpm run build 文件过大,其中主要是vender.js有1.5M,代码部署到服务器,首次访问加载页面时比较慢,耗时6.5s左右,所以需要优化下. 1.Nginx开启gzip 找到nginx.config.关于gzip压缩代码: http { gzip on; #开启或关闭gzip on off gzip_disable "msie6"; #不使用gzip IE6 gzip_min_length 100k; #gzip压缩最小文件大小,超出进行压缩(自行调节) gzip_b…

axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道门槛,会报错XMLHTTPRequest can not load http://40.00.100.100:3002/. Response to preflight request doesn’t pass access control…. 为什么跨域同源非同源自己去查吧,在webpack配置一下…

vue项目如何打包扔向服务器

vue项目如何打包扔向服务器当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上. 如果是 vue-cli (非 simple 脚手架),这篇文章可能有点帮助.地址链接:vue-cli 如何打包上线先来描述一下期间遇到的问题有哪些: 1.打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提…

解决修改css或js文件后，浏览器缓存未更新问题

问题描述:最近在上线新版本项目的时候,发现有的用户的操作还是调用的老版本JS里面的内容,这样就造成原来新的JS里面加上的限制不能限制用户的操作,从而导致用户可以重复操作. 问题产生原因: 如果在用户之前已经访问过系统,那么浏览器中会缓存该系统的CSS.JS,这些CSS.JS缓存未过期之前,浏览器只会从缓存中读取CSS和JS,如果在服务器上修改了css和js,那么这些修改在用户的浏览器中是不会有变化的. 解决方式一: 用户按Ctrl + F5强制刷新页面或者手动清空了浏览器的缓存.此时浏览器会重新…

如何修改Vue打包后文件的接口地址配置

1.背景常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的.如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效.那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢? 2.可选方案进行了调研后,网上介绍的方案有2种: 1)在static上设置一个config.js,把配置的参数设置成 window 下的…

vue打包dist文件时，图片找不到

1.vue打包dist文件时,图片找不到,无法像在本地一样查看问题描述: 本地代码:<div class="icon"><img :src="'../../src/assets/img/usecar/' + item.appIcon +'.png'" width="50" height="50"/></div> (显示正常) 测试服务器:打包dist文件到测试服务器后,显示不正常…

vue之项目打包部署到服务器

这是今年的第一篇博客.整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下. 第一步:这是很关键的一步.打开项目,找到config文件夹下的index.js.搜索 assetsPublicPath 默认值为 '/‘ 应改为你要挂在到服务器的那个文件下的路径 . 第二步:因为在开发时会有跨域问题我们为了方便会配置跨域代理比如proxyTable 一般都这样写,因为要部署到服务器上所以到服务器上之后就不…

nginx优化:使用expires在浏览器端缓存静态文件

一,nginx中expires指令的作用网站的图片等静态文件一旦发布,通常很少改动, 为了减小对服务器请求的压力,提高用户浏览速度, 我们可以设置nginx中的expires, 使用户访问一次后,将图片缓存在用户的浏览器中说明:如果用户对浏览器强制刷新或着清除缓存, 则expires的设置会失效,因为浏览器本地的缓存文件都没了说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest 对应的源码可以访问这里获取: htt…

vue打包后不使用服务器直接访问方法

根据官网打包执行npm run build 后dist文件夹打开的index.html 是空白需要开启http服务器才能访问,以下是解决办法 1.找到config文件夹下的index文件修改成 2.找到build文件夹下的until文件修改成然后执行npm run build重新打包下就ok了…

Vue打包后出现一些map文件

Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行 cnpm run build 开始打包 2,会在项目目录下自动创建dist目录,打包好的文件都在其中解决办法: 去src/config/index.js中改一个参数: productionSourceMap:false 把这个改为false.不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码…

vue中使用monaco-editor打包文件混乱的问题

之前讲述了怎么在vue项目中使用monaco-editor (https://www.cnblogs.com/XHappyness/p/9414177.html),使用是正常的,虽然 npm run build 打包后文件能够正常使用,但是文件结构很乱,而且很大. 1. 初步解决,使用monaco-editor-webpack-plugin(https://github.com/Microsoft/monaco-editor-webpack-plugin)进行打包配置(在webpack.base…

vue打包后出现一些map文件的解决方法

Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1.运行 cnpm run build 开始打包 2.会在项目目录下自动创建dist目录,打包好的文件都在其中解决办法:去src/config/index.js中改一个参数: productionSourceMap:false 把这个改为false.不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压…

Vue工程模板文件 webpack打包

1.github github地址:https://github.com/MengFangui/VueProjectTemplate 2.webpack配置 (1)基础配置webpack.base.config.js const path = require('path'); //处理共用.通用的js const webpack = require('webpack'); //css单独打包 const ExtractTextPlugin = require('extract-text-webp…