【vue-cli3 项目打包优化(解决首屏卡顿白屏,JS加载过多)】教程文章相关的互联网学习教程文章

vue.config.js解决跨域问题【代码】【图】

需求我们要访问后台的数据,但因为后台的端口号不一致所以需要实现跨域未跨域// 请求接口 后台的接口为5001 我们本地的接口为8080,所以我们需要去到vue.config.js配置跨域 http://localhost:5001/api/this.$axios.post(‘http://localhost:5001/api/users/register‘,this.user).then(res =>{// 注册成功alert(‘注册成功!‘)this.$router.push(‘/login‘)console.log(res)})//在http全局配置了catch所以这边是不用配置的 }在当前项...

Vue打包报错Unexpected token: punc(()解决方案【代码】【图】

(用vscode)vue项目打包时,报错,报错信息如下:ERROR in static/js/0.564c764efc3ecf31190c.js from UglifyJs Unexpected token: punc (() [App.vue?4b081dc6:15,0][static/js/0.564c764efc3ecf31190c.js:89,9]ERROR in static/js/1.ba486a70bd6d5d196b1f.js from UglifyJs Unexpected token: punc (() [App.vue?9b59fb70:15,0][static/js/1.ba486a70bd6d5d196b1f.js:89,9]ERROR in static/js/2.b1b899693213f2c6f714.js from U...

vue -Missing space before value for key 'path'vue.js解决空格报错

webpack.base.config.js文件注释掉下面的东西!! module: { rules: [ /*{ test: /\.(js|vue)$/, loader: ‘eslint-loader‘, enforce: "pre", include: [resolve(‘src‘), resolve(‘test‘)], options: { formatter: require(‘eslint-friendly-formatter‘) } },*/ { test: /\.vue$/, loader: ‘vue-loader‘, options: vueLoad...

【vue】npm run mock & npm run dev 无法同时运行的解决【图】

【关于系统,没注明的都是windows系统,若以后用的是mac系统则会另外备注】当项目数据是通过mock搭建而成(参照:【vue】本地开发mock数据支持)时,运行mock服务器和项目的命令 就参照了package.json 中 “script” 下的 "mockdev" 配置。而 我们在控制台输入 cnpm run mock & cnpm run dev 或 cnpm run mock 都无法同时运行mock服务器和项目。这时候可以通过以下方式得到解决: 方式① cnpm run mock | cnpm run dev ...

安装vue-cli最新版后,无法使用console方法的解决办法【代码】

新年后重装系统,重装vue-cli,运行项目,发现无法使用 console根据提示,原来是eslint禁了此函数的使用。解决办法:找到项目文件夹内的 package.json文件,打开,找到 "rules":{}修改为:"rules": {"no-console": "off"},问题解决!原文:https://www.cnblogs.com/sx00xs/p/12158803.html

Vue packages version mismatch版本问题的解决

今天下载了一个vue项目,npm run dev 时发现报错,错误信息入下:error in .src/components/mobile/SeniorDetail.vueModule build failed: Error:Vue packages version mismatch:vue@2.5.13vue-template-compiler@2.5.17根据提示,是版本不匹配的问题,将vue的版本改成和vue-template-compiler的版本一致即可, 使用如下命令安装指定版本并保存版本信息到package.json文件 npm install vue@2.5.17 --save原文:https://www.cnblogs...

记录运行vue文件项目时报错问题解决方案

error:./common/http.js in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-opt 解决方案: 1.检查路径:检查引入的组件路径是否正确,同级路径最好加上./ 2.检查引入的组件注册了是否应用,若没应用也可能导致报错 3.检查项目文件是否设置为了只读,可右键查看属性取消只读试试原文:https:...

vue-router报错Uncaught (in promise)及解决方法【代码】【图】

1、报错原因在升级了Vue-Router版本到到3.1.0及以上之后,页面在跳转路由控制台会报Uncaught (in promise)的问题。这是什么原因呢?看vue-router的版本更新日志V3.1.0版本里面新增功能:push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常。 2、解决方法方法一:在调用方法的时候用catch捕获异常this.$router.replace(‘/home‘).catch(err => {console.log(err) })方法二:对Router原型链上的push、replace方法...

vue项目打包之后页面空白解决办法

之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示。然后百度找了原因,修改了两处地方一、修改 assetsPublicPath 在config/index.js里面,有个 assetsPublicPath 属性,源码是‘/’,修改成‘./’,加个点assetsPublicPath: ‘/‘,二、路由模式将histroy改成hash模式,起初 mode:‘history‘const router = new Router({ base: ‘/‘, mode: ‘hash‘, routes:...

vue-cli3 一直运行 /sockjs-node/info?t= 解决方案【代码】

首先 sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。服务端:sockjs-node(https://github.com/sockjs/sockjs-node)客户端:sockjs-clien(https://github.com/sockjs/sockjs-client)如果你的项目没有用到 sockjs,vuecli3 运行 npm run serve 之后 network 里面一直调研一个接口:http://localhost:8080/sockjs-node/info?t=1462183700002 解决办法...

解决Vuex刷新页面数据丢失问题 ---- vuex-persistedstate持久化数据【代码】

何为Vuex?用处是什么?为什么刷新丢失?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 --官方回答组件化开发作为前后端分离模式的一大特点但也伴随组件之间的通信的问题,当项目庞大、数据共享场景多、多层组件通信时,这时它就应该出现了,它为开发者提供简便的数据共享中心,不用再去纠结组件之间怎么传递数据了刷新页面数...

vue中对象和数组无法触发双向绑定的情况以及解决方案【代码】

1. 修改数组中的内容,数组发生了改变,而页面没有发生改变。解决方案是通过$set方法来设置数组的值,该方法有三个参数,第一个是要被设置值的目标对象,第二个是设置值在数组中的索引,第三个是设置的值<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style type="text/css">[v-cloak]{display: none;}</style></head><body><div id="app" v-cloak><div v-for="item in testArr">{{item}}</div><button @c...

vue 路由懒加载(解决vue项目首次加载慢)【代码】【图】

懒加载:也叫延迟加载,即在需要的时候进行加载。为什么需要懒加载?当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。场景:如vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,即使做了loading也是不...

项目中解决实际问题的代码片段-javascript方法,Vue方法(长期更新)【代码】【图】

总结项目用到的一些处理方法,用来解决数据处理的一些实际问题,所有方法都可以放在一个公共工具方法里面,实现不限ES5,ES6还有些Vue处理的方法。都是项目中来的,有代码跟图片展示,长期更新。 1.获取两个给定日期之间所有日期集合/*** 传入一个日期字符串(不要时间,如果带时间的话在修改方法)**datestr:形如‘2017-06-12’的字符串(如果是2017.06.12格式在修改代码,这里没有做通用)**return Date 对象 **/ getDate (dates...

webstorm&phpstorm打开大型项目卡死解决如vue-laravel-Yii2【代码】

用phpstorm开发时如果项目中文件过多会造成phpstorm变慢甚至卡死,尤其在node加入到我们的项目中更加会加重这种情况,因为node_modules目录中的模块非常多,phpstorm加载这些文件时就会造成phpstorm卡死。可以在项目设置中的directoies的目录属性,以使得phpstorm更好的工作。可以将目录分为4种类型tests,sources,excluded,resource root。如果觉得每次配置麻烦,可以将.idea目录中的you-project-name.iml文件保存,新建项目时覆...