本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。（由于每个项目的情况都不尽相同，本方案已经完美解决本在所使用项目，具体情况可能还需要修改。） 1.项目背景分析 本人是Java后台开发，Vue其实使用也没有多久，只能说简单了解。发现问题的时候其实也一头雾水，第一思想就是百度看别人的思路。 1.1 查看项目打包后文件 首先看看项目打包后文件内容，看看有没有什么能突破的地方。文件目录如下：打眼一看可...
解决 webpack-dev-serveri 启动后通过外部访问报错 invalid host header 修改 config/index.js 的 host 属性为 ‘0.0.0.0 { // ..., host: 0.0.0.0, port: 8080, // ... }修改 build/webpack.dev.conf.js 的 devServer 配置 增加 disableHostCheck = true devServer: {clientLogLevel: warning,historyApiFallback: true,hot: true,compress: true,host: HOST || config.dev.host,port: PORT || config.dev.port,open: config.dev....
一个 Vue 项目从一台电脑上传到 github 上之后，再另外一台电脑上 git clone 。并使用 npm run dev 或 npm run start 发生以下报错的解决方法。报错原因缺少 node_modules 里面的依赖。在项目目录下使用 npm install然后再 npm run dev。如果在这一步当中， npm install 执行的过程中，处于一直卡顿的状态。说明网络状况不佳。建议使用 cnpm 淘宝源。 淘宝源使用 cnpm -v 查看是否已经安装 cnpm。如果没有，使用 npm install cnpm ...
最近做了两个关于h5页面对接公众号的项目，不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话，进行总结分享一下如何处理。在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有死个方法可以适用。 方法一：引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案：https://github.com/amfe/lib-flexible（此处可点击） 淘宝的其实也和viewport的有点像，但是它主要是根据设备设备像素比设...
公司有个业务需求,要求后台传pdf的base64编码给前端,前端显示到界面上,后来在网上搜索了很多关于base64转pdf的文章,都写的不是非常的详细,在实现的过程中遇到很多坑,经过一天的研究终于实现了这个功能,分享一下我在这个功能中遇到的问题和解决方法要注明的是这里用到的核心插件是pdf.js,原理是动态生成canvas标签,然后通过pdf.js生成一个能渲染出pdf的对象,随后渲染每个canvas,并且生成的pdf是画面的形式,并没有pdf之类的控件引入插...
解决方案 可以安装整个stage2的预置器或者安装 Object Rest Operator 的babel插件 babel-plugin-transform-object-rest-spread 。 接着在babel的配置文件 .babelrc 中应用插件： {"presets": [["es2015", { "modules": false }]],"plugins": ["transform-object-rest-spread"] } // {"presets": [["env", {"modules": false,"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}}],"stage-2"],"plugins": ["trans...
vue中v-if 和v-else-if在页面加载的时候，不满足条件的标签会加载然后再消失掉，如果要解决这个问题，案例如下： vue html代码块： <div id="divApp"> <div v-if="type === A" v-cloak> A </div> <div v-else-if="type === B" v-cloak> B </div> <div v-else-if="type === C" v-cloak> C </div> <div v-else v-cloak> Not A/B/C </div> </div>vue js代码块： var divApp = new Vue({ el: #divAp...
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。 可以在根元素添加v-cloak来解决，并且设置它的样式即可。 代码只是示例，还需要自己修改测试。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 在引入的css文件中写入这个*/ [v-cloak] { display: none; } </style> </head> <body> <!-- 添加这个v-cloak --> <div id=app...
使用vue init webpack 创建vue项目时报如下错误： vue init webpack my-projectC:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:374:25) at Object.Module._extension...
用vue-cli构建了项目之后在webstorm开发，用npm run dev跑本地服务，经常修改之后在浏览器刷新没反应，偶尔才会有刷新，需要重新跑一遍npm run dev才会更新，这是怎么回事呢？ 解决方法 webstorm保存的时候会先保存到旧时文件中，其实并没有真正保存，要在setting->stystem settings下的“use save write”去掉 以上这篇浅谈VUE-CLI脚手架热更新太慢的原因和解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望...
利用 vue-cli 搭建的项目平台 利用stylus写的css样式 有 css-loader 依赖包x 下图是 webpack.base.conf.js 关于字体文件的配置有人这里会有重复的字体文件的配置，删除一项即可 出现的问题：引入字体图标出现问题 1.报错将字体引入的相对路径改成绝对路径 相对路径绝对路径2.不报错，但是出现的字体图标是小方框 有警告信息：小方块：报错是因为重定向的问题 出现上述问题的原因 ①没在用到的地方引入字体的样式文件 ②使用的是后缀...
问题 vue-cli npm run build命令默认把dependencies中的依赖统一打包，导致vendor.js文件过大，出现首屏加载过于缓慢的问题。 解决方案 像vue、axios、element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入，没有必要打包到vendor.js中。 1.在项目根目录index.html使用cdn节点导入 <div id="app"></div> <!-- 先引入 Vue --> <!--开发环境--> <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script> <!--生产环...
最近在尝试用nuxtjs来搭建新的站点，但是平时在jquery里面用惯的一些插件一到vue上面引用就各种不顺畅~本文记录一下在用Swiper插件来做轮播图的时候遇到的问题~至于怎么在vue里面引用插件就不累赘了，npm能告诉你~ Swiper的分页器是靠mounted()挂载到Vue组件上而不是直接写在template里，所以在style scoped中写的样式无法作用到分页器的点上。解决办法是把重写的样式写在scoped之外。(以下截图不完整，仅用做说明) template：scri...
我的代码之前类似下面的结构 <div id="example-1" v-for="item in items"><ul><li>{{ item.message }}</li></ul> </div>结果发现不好用，数据读入了但是没有显示 于是我后来看官网的例子才明白，原来是id和v-for不在一个层级上，官网的例子如下，我按照不在一个层级上改，果然好用了 <ul id="example-1"><li v-for="item in items">{{ item.message }}</li> </ul>以上这篇Vue中的v-for指令不起效果的解决方法就是小编分享给大家的...
所遇问题 启动vue-cli项目服务，用本机IP无法访问此网站，拒绝了我们的链接请求。从而无法从手机上预览效果 原因分析 在我们的bulid目录下有一个webpack.dev.config.js的配置文件，发现devServer对象里的host属性取自process.env.HOST || config.dev.host。于是这里我们去查看config.dev.host。在我们的config目录下有一个index.js, 找到dev对象的host属性发现该版本的vue-cli将host主机名定义为localhost, 从而导致了本地IP不能访...