vuejs+webpack
show_code
爱前端,爱dota,爱生活,为技术而痴狂,偏爱新技术的学习!
展开
-
vue项目解决访问tomcat服务器文件跨域问题
跨域相关的知识就不多说了,这里直接说解决方案。/test.pdf,现在就改成http://localhost:3002/proxy/test.pdf。/test.pdf,现在就改成http://localhost:端口号/proxy/test.pdf。这样跨域访问tomcat文件的问题就解决了。我这里说的是不走接口层次的,同上,比如访问文件路径是。原创 2023-08-01 11:28:17 · 1099 阅读 · 0 评论 -
vue项目中使用jsonp方法
jsonp虽然是一项古老的技术,但是有时候没它不行,现在vue项目里面有个插件提供的就是使用jsonp的方式回调,所以总结一下jsonp的使用方法。原创 2023-07-04 08:39:52 · 3324 阅读 · 0 评论 -
使用forever守护node服务,启动vue3+tsup打包js
现在跑个node服务的项目遇到一个问题,一段时间后会自动断开服务。查了一些问题,有一个观点是node服务是需要守护的,这样系统就不会关闭它,所以就用了下node自带的一个工具forever,果然还不错。原创 2023-06-08 11:58:25 · 300 阅读 · 0 评论 -
tsup.config.js配置项解读
tsup是一个基于 Rollup 的 TypeScript 构建工具,可以将 TypeScript 代码打包成一个单独的 JavaScript 文件。你可以使用tsup.config.js文件来配置tsup的行为。原创 2023-06-08 11:40:13 · 1064 阅读 · 0 评论 -
vue3里面变量为什么用ref
定义的变量会自动进行响应式更新,当变量发生改变时,相关组件会自动重新渲染。访问其原始值,这使得开发人员可以很容易地使用原生 API 处理 ref 对象包装的变量。综上所述,使用 ref 定义变量可以使代码更加简洁、易于管理,并且具有更好的类型提示和异步更新支持。可以在定义变量时提供类型提示,这样可以在编写代码时捕获一些错误,并且在编辑器中进行智能提示。,可以在下一个 DOM 更新周期之前执行回调函数,从而确保变量更新后正确处理相关操作。函数时,您需要传递一个函数作为参数,这个函数需要访问。原创 2023-03-17 17:09:54 · 1744 阅读 · 1 评论 -
解决node升级到18版本node-sass安装问题
删除项目的package.json.lock和yarn.lock这两个文件,最好是node_modules文件夹也删除,免得有缓存,然后再npm install或yarn 重新安装一遍。基本就这样就跑起来了,可能还会遇到其他包版本不对的问题,需要更加报错信息进行一一升级。原创 2023-02-15 17:46:01 · 24155 阅读 · 9 评论 -
解决UglifyJs Unexpected token punc «{», expected pun 报错问题
我开始还以为你代码中哪里标点符号的问题,把整个代码过了一边,眼睛都麻了,还好代码量不多,然而并没有发现是啥问题,后来就把报错信息百度了一下,才发现是UglifyJs打包最新语法的JS代码会出现问题,才引起的这个错误。原创 2022-11-07 15:07:29 · 2571 阅读 · 0 评论 -
package.json中去除eslint检测
【代码】package.json中去除eslint检测。原创 2022-08-21 15:36:27 · 1452 阅读 · 0 评论 -
npm中node-sass安装报错解决办法
前两天换了个新电脑,然后配置开发环境,拉代码,结果在npm install安装包的时候,就报了个node-sass无法安装的错误,还提醒没安装python2...有点无语。 然后查了半天,发现是node16版本引起问题,后来就卸载了当前版本,安装了14的版本,问题解决了,当然python2.7我也安装了,但是安装了没起啥作用,最后还是通过降低版本解决的! 经验总结,开发工具啥的,最好不要用最新版本了,基本都有坑,都是找小白鼠排坑!!...原创 2021-12-27 16:19:54 · 8403 阅读 · 0 评论 -
VUE-CLI3 打包不同线上环境路径
最近接到一个奇葩需求,搞完的一个项目要部署到不同的线上服务器上,以往用VUE-cli3脚手架开发,都是免配置的,在axios.js里面进行一个判断就行了,如下:// 配置接口地址if(process.env.NODE_ENV === "development"){ //开发环境 axios.defaults.baseURL = 'http://192.168.9.81:8080/cdps'}else{ //线上环境 axios.defaults.baseURL = 'ht...原创 2021-12-24 10:15:44 · 936 阅读 · 0 评论 -
Vue中mixin的使用
相信很多写vue组件的人都会遇到这样的情况,有两个组件,功能很相似,但又有个体差异化的实现,这时候我们就来到“岔路口”了,我是应该把它拆分成两个不同的组件呢?还是搞成一个组件,然后通过props传值来创造差异性从而进行内在的区分呢? 其实这两种方法就实现功能来说,都是可行的,但往vue特性的理解上来看,两种解决方案都不够完美和高级:第一种,如果拆分成两个组件,你就不得不冒着功能变动而要在两个文件中更新代码的风险,这与《 The Pragmatic Programmer 》...原创 2021-11-18 18:24:17 · 1169 阅读 · 1 评论 -
Vue导出excel数据
一、需要安装三个依赖: npm install -S file-saver xlsx npm install -D script-loader 二、项目中新建一个文件夹:(vendor---名字任取) 里面放置两个文件Blob.js和Export2Excel.js。...原创 2021-06-08 17:55:43 · 417 阅读 · 0 评论 -
vue中html导出到word
最新项目要实现个需求,数据导出到word格式的文档,所以就上github上找点思路,一看就发现了一个https://github.com/evidenceprime/html-docx-js,但是现在貌似进不去了,应该是需要翻墙了;那就说说怎么使用html-docx-js来导出word吧!第一步:安装必备包:npm install html-docx-js -Snpm install file-saver -Sfile-saver是用来保存文件的,也是必须安装的。第二步:使用现在原创 2021-04-19 08:47:52 · 3690 阅读 · 15 评论 -
解决vue-admin-template中权限控制使用动态路由刷新后404的问题
vue-admin-template(vue-element-admin)是个非常好用的B端UI框架,谁用谁知道!在使用的过程中,加入权限模块后,刷新后权限控制的页面就默认跳转到404页面了,搞了半天终于解决了,原因是权限控制的路由模块是动态添加进去的,而我的404监听路由是在默认路由里面的,优先级比动态路由要高,所以刷新后默认先被404接管了,改一下,把404监听路由也放到动态路由的末尾就可以了,代码如下:// 404 page must be placed at the end !!!{ .原创 2020-05-09 09:22:29 · 6277 阅读 · 18 评论 -
用$nextTick解决vue中ref等属性失效的问题
vue项目中组件的初始化以及数据填充、更新都是需要一定的时间的,而且这些更新是异步进行的,UI渲染线程和JS主线程并不是同一个线程,所以在开发的时候极有可能遇到的情况是,引用子组件后,子组件显示出来了但是父组件的ref属性并没有找到子组件,这就要用到vue中的$nextTick方法来解决。先看看官方对这个方法的说明如下:Vue.nextTick( [callback, con...原创 2020-04-23 11:06:57 · 4882 阅读 · 1 评论 -
Vue中的虚拟DOM详解
Vue2.0引入了虚拟DOM,比Vue1.0的初始渲染速度提升了2~4倍,并大大降低了内存消耗。目前主流的前端框架Vue、React核心技术也都使用了虚拟DOM,那你一定好奇为什么要提出虚拟DOM,虚拟DOM是什么,它有什么优势?下面会一一详解。为什么要虚拟DOM? 在Web早期,页面的交互比较简单,没有复杂的状态需要管理,也不太需要频繁的操作DOM,随着时代的发展,页面上...原创 2020-03-21 14:39:14 · 1297 阅读 · 0 评论 -
vue.config.js配置之configureWebpack(两种用法)
vue.config.js是vue-cli3之后新增的一个功能,再这个版本里面如果要配置webpack相关的属性,就需要自己在项目根目录新建vue.config.js这个文件,然后在该文件里面去写入你需要的配置等等。vue.config.js的具体配置参数可以参照vue-cli文档地址:vue.config.js配置在配置的过程中遇到一个属性,configureWebpack,先来看看文档...原创 2019-12-13 15:59:02 · 104438 阅读 · 3 评论 -
vue-cli3.0中vue.config.js的基本配置(去除esLint提示和解决build后静态文件路径报错)
vue-cli是开发vue项目必不可少的脚手架工具,3.0版本之前的目录结构是由config目录的,关于webpack配置的文件都放在该目录里面,而3.0版本之后做了一个大更新,webpack相关的默认配置都帮你集成到webpack的npm 包里面去了,官方提供的一种修改配置的方式就是开发者自己在项目的根目录(与src同层级的目录)下建立一个vue.config.js的文件,然后去覆...原创 2019-10-21 11:13:50 · 8660 阅读 · 0 评论 -
解决NPM使用下载慢或者无法下载的问题error
npm全称Node Package Manager,是node.js的模块依赖管理工具 ,也是目前前端开发必备的工具之一了。由于npm的本源在国外,所以国内用户使用起来各种不方便。下面整理出了两个国内优秀的npm镜像资源,国内用户可以选择使用。淘宝npm镜像搜索地址:http://npm.taobao.org/registry地址:http://registry.npm.tao原创 2017-10-18 15:02:02 · 2623 阅读 · 0 评论 -
npm --save和--save-dev区别
目前大多数基于vue的项目都是用vue-cli 创建的。当创建项目完成后,我们进入到项目目录,启动cmd命令窗口,输入npm install,它就会安装一堆东西(依赖),然后再输入npm run dev, 我们就可以看到网页了,整个项目启动成功。这就是npm 最强大的地方,只使用简单的两个命令,我们就能够快速地在本地启动一个项目。 npm install 就是安装模块,npm run d原创 2017-10-26 09:03:24 · 12477 阅读 · 0 评论 -
在vue中使用plupload上传图片到七牛(着重解决moxie is not defined问题)
在传统的jquery或者原生JS环境下结合plupload上传到七牛的案例就不说了,一搜一大片,这里重点说说使用了vue之后,在vue环境下要保持相同的体验度上传图片到七牛,下面就是搞了接近两天摸索出来的,过程只想MMP,但是还是得到了满意的结果,算是功夫不负苦心人啊(这个过程真的是坑太多了)! 这个排坑的过程就多说了,搞来搞去就是plupload和qiniu的...原创 2018-09-17 18:00:19 · 9097 阅读 · 4 评论 -
解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
在用vue做前端开发的时候,因为一般跑vue使用的webpack自带的node服务,而我们实际要使用的数据确是后台服务器上的,所以这就涉及到服务器请求跨域的问题。本来在诸如axios之类的网络请求参数里面配置withCredentials: true,就可以解决跨域问题的,但是现在浏览器比如chorme有做了新的跨域限制,比如要服务器端配置允许跨域才行,详见跨域问题解决,是英文的...原创 2018-11-01 19:43:46 · 3822 阅读 · 0 评论 -
vue-baidu-map 使用("踩坑")心得
最近在用vue开发应用,要用到百度地图,之前用jquery有用过百度地图的JS SDK,基本功能都有实现过,但是到vue上就必须得自己封装插件了,当然晚上有的自己肯定是不想再去造轮子的,除非这轮子不合适,一搜果然与现成的,传送门在这:https://dafrok.github.io/vue-baidu-map/#/zh/index,点击进去就是使用文档,但是有很多坑,这里说一下,免得大家重...原创 2019-01-16 21:23:49 · 49982 阅读 · 31 评论 -
详解vue2.0中 render: h => h(App)
创建一个vue项目,基本都是用到vue-cli,新建的项目main.js里面会有这么一句代码:new Vue({ render: h => h(App),}).$mount('#app')这个就是创建一个vue对象,然后挂载到制定的页面节点。这里重点说的是 render: h=>h(App) 是啥意思?怎么理解?这个首先要知道ES6的箭头函数的用法,这个函数还...原创 2019-08-16 12:52:33 · 17079 阅读 · 5 评论 -
详解ES6中的async/await
ES2017 标准引入了 async 函数,使得异步操作变得更加方便。 先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数async function timeout() { return 'hello world'...原创 2019-08-16 23:14:52 · 14218 阅读 · 10 评论 -
使用webpack的代码分离"Code Splitting"实现vue应用的懒加载
在vue应用中,我们可以在三个层次上使用懒加载和代码分离技术:组件,通常是我们熟知的异步组件 路由 Vuex模块他们都有一个共性:他们使用了动态引入(webpack2.0以上支持)。#Vue组件中的懒加载这个在 Egghead(国外博文网站)的文章 “Vue异步组件中按需加载组件” 已经有了很好的说明。使用起来也很简单,注册组件时使用import方法即可:Vue.co...翻译 2019-09-05 12:04:51 · 627 阅读 · 2 评论 -
vuejs+webpack技术栈(入门篇)
目前前端技术更新得实在是太快,各种技术层出不迭,什么前端自动化工具(gulp/grunt),前端组件化框架(vuejs,reactjs),前端工程化(这是一套技术思想),前端模块化(seajs,requirejs),简称就是四个‘现代化’。当然这些东西虽然每种都花样很多,但是思想基本是想通的,每种思想学习其一即可,而且建议前端不要一味的去追逐这些新东西,等你项目或者开发需要到这些技术,你再去基于需原创 2016-11-28 12:09:52 · 7404 阅读 · 0 评论