在生成vue项目的时候，出现如下错误ERROR in static/js/index.d66d806fcdd72b36147b.js from UglifyJs Unexpected token: punc (() [src/components/Hello.vue:26,0][static/js/index.d66d806fcdd72b36147b.js:34,6] ERROR in static/js/cell.89bb6f1195b769a2c949.js from UglifyJs Unexpected token: punc (() [src/components/cell.vue:10,0][static/js/cell.89bb6f1195b769a2c949.js:19,6] ERROR in [copy-webpack-plugin] una...
这个地方坑比较多，查看网上并没有详细的文档，新手一般写到这里很痛苦。这里我只介绍一下我解决的方案，虽然它不是最好的，但是可行的方案； 总体分两步 1）跳到微信支付链接，它会自动拼接上code 2）获取本网址，截取code； 在vue中哪里获取code？ 在路由钩子函数beforeEach获取。（如果想了解beforeEach的用法，请关注我下一篇博客）。我们去请求微信网址"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +appid ...
最近接手了一个后台管理系统，技术栈主要是vue全家桶+elementui，老大打开测试环境页面的时候，说看到首页需要6秒钟，那如何进行优化呢？ 首先我们需要安装webpack-bundle-analyzer // webpack.prod.conf.js if (config.build.bundleAnalyzerReport) {const BundleAnalyzerPlugin = require(webpack-bundle-analyzer).BundleAnalyzerPluginwebpackConfig.plugins.push(new BundleAnalyzerPlugin()) } // config/index.js build: {/...
本文实例讲述了vue v-for循环重复数据无法添加问题解决方法。分享给大家供大家参考，具体如下： 问题： 错误提示如下：解决问题的代码示例： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com vue v-for循环重复数据无法添加问题</title><style></style><script src="vue.js"></script><script></script> </head> <body><div id="box"><input type="button" value="添加" @click="add"><ul><l...
写在前面： 传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 Vue router如何传参 params、query是什么？ params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。 路由界...
前言 最近遇到一个问题，在一个页面需要动态渲染页面内的表单，其中包括 checkbox 表单类型，并且使用 Element 组件 UI 时，此时 v-model 绑定的数据也是动态生成的 例如：定义的 data 的 form 里面是空对象，需要动态生成里面的 key export default {data() {return {form: {}}}, }从后端接口得到 checkList，这个就是动态生成的表单数据v-for 循环 checkList，得到 key，然后直接 v-model=“form.key” 动态生成 form 里面的 key...
前言 Vue-i18n大家应该都不陌生，Vue-i18n安装的安装方法如下：npm install vue-i18n --save然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到以下情况：Value of key xxx is not string! Cannot translate the value of keypath xxx. Use the value of keypath as def...
报错场景：将APi中得到的response数据，用Vue$set()使数据动态响应 报错代码：methods: {textTranslate: function (text, to) {$.ajax({url: http://openapi.youdao.com/api,type: post,dataType: jsonp,data: {q: text,appKey: this.appKey,salt: this.salt,from: this.from,to: to,sign: md5(this.appKey + text + this.salt + this.key)},success: function (data) {this.$set(this.$data, translatedText, data.translation[0]...
项目用run dev build 打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。因为我们的图片路径都是经历过文件夹的，在本地引用图片是绝对路径，但打包后因为把配置的static文件夹当成了根路径，所以很多图片找不到都不显示。 解决办法如图： (1).修改 assetsPublicPath: ./ (2).打开webpack.prod.conf.js，在output：增加 publicPath: ./虽然解决了资源路...
前言 在前端平常的业务中，无论是官网、展示页还是后台运营系统都离不开表单，它承载了大部分的数据采集工作。所以如何更好地实现它，是平常工作中的一个重要问题。 在应用Vue框架去开发业务时，会将页面上每个独立的可视/可交互区域拆分为一个组件，再通过多个组件的自由组合来组成新的页面。例如<template><header></header>...<content></content>...<footer></footer> </template>当用户的某个行为触发表单时（例如注册、建立内...
最近工作上遇到了这样一个Bug：“vue微信分享出来的链接点开是首页” 公司网站有PC端和移动端，两个版本。其中如果手机访问PC端，则自动跳转到移动端。（这是常规操作，没啥稀奇点。） 可神奇的问题来了。 在移动端中有微信分享功能，如果手机直接访问手机端的地址进入子页面分享，点开分享的链接进入的是子页面。但是如果是从PC端跳转进入手机端，分享子页面链接打开将会是主页。 这个问题我也百度了各种方法，折腾了一天，然而都...
懒加载：也叫延迟加载，即在需要的时候进行加载，随用随载。 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。 简单的说就是：进入首页不用一次加载过多资源造成用时过长...
Vue.js 使用v-cloak后仍显示变量的解决方法 v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的，但有时候添加了这个指令仍会显示变量，这是怎么回事呢？。 v-cloak 用法： HTML代码： <div v-cloak>{{ message }} </div>CSS代码： [v-cloak] {display: none; }这样直至div内变量编译完毕后才会显示。 但有时添加完毕后仍有部分变量会显示，这是怎么回事呢？通过控制台查看，原来是 v-cloak 的display属性被优先级别高...
1、假如访问的接口地址为 http://www.test.com/apis/index.php （php api 接口） 2、而开发地址为http://127.0.0.1:8080,当axios发起请求时，出现如下错误：Failed to load http://www.test.com/apis/index.php?&act=login: The value of the Access-Control-Allow-Origin headerin the response must not be the wildcard * when the requests credentials mode is include. Origin http://127.0.0.1:8080 is therefore not allo...
子组件能够通过自身的props选项获取父组件上的数据，但是在默认情况下，props是单向绑定的---当父组件数据（属性）发生变化的时候会传递给子组件，引起子组件的变化，但不能反过来并且不允许子组件直接改变父组件的数据，会报错的。例如： 也就是说当通过一种方法改变父组件数据的时候，子组件与之相关联的props数据也会发生改变，从而影响子组件，但是子组件直接改变从父组件拿过来的props数据却不能影响父组件的原始数据。也就是...