使用vue遇到的一些问题

当前项目需要用vue重写,由于Vue还是初学,所以肯定会遇到一些问题,在这里记录一下,方便查看。

vuex绑定到v-model提示

[Vue warn]: Computed property "productSeries" was assigned to but it has no setter.

描述: 将vuex中的数据直接拿出来并通过v-model绑定到页面元素上,报错。原因是vuex类似redux,其数据只允许通过vuex提供的方法,action、mutation来更改。

解决: 思考这个数据节点是不是特别有必要放在vuex,如果不需要,则只绑定到当前组件就行了,如果需要,则有两种方法解决:1、在当前组件的data中定义一个对象来接收store中的数据;2、加入get和set方法。

P.S. vuex给我的感觉:数据能写在当前页面就写在当前页面,尽量少用vuex。不然又要写get/set方法,又要考虑action/dispatch,感觉有点麻烦,不能突出vue双向绑定的优势。

Vue-cli生成的项目在局域网调试的问题

描述: 在mac上面用vue-cli创建的项目,直接npm start打开调试,本机可以用localhost:8080打开,mac在局域网内的地址为 192.168.43.102,然而我用一台windows输入 192.168.43.102:8080 却打不开,感觉可能是vue-cli没有默认配置。

解决: 打开项目根目录下的config/index.js,看到host这一行

host: 'localhost', // can be overwritten by process.env.HOST

恩,可以直接在node进程写HOST
遂打开根目录下的package.json,修改start命令,添加一个HOST

"start": "npm run dev"

改成

"start": "HOST=0.0.0.0 npm run dev"

执行npm start

问题解决

Vuex在IE11无法使用的问题

描述: 客户需要兼容IE11,直接用IE11打开页面,发现页面空白,什么都没显示。
打开IE的控制台,出现了vuex的提示:
[vuex] vuex requires a Promise polyfill in this browser
看来是IE11不支持Promise

解决: 上github,搜到两个相关的问题

https://github.com/vuejs-templates/webpack/issues/260
https://github.com/vuejs-templates/webpack/issues/474

尤大提示 解决方案就是引入babel-polyfill或者es6-promise
看了一下其他回复,我选择安装es6-promise

npm install es6-promise

然后在main.js第一行引入

// 添加es6-promise以兼容IE
import 'es6-promise/auto';

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';
// 其他内容

问题解决

Cannot read property 'compilation' of undefined的问题

描述: 用vue-cli生成的一个项目,直接npm run build,报错

> tms-vue-ele@1.0.0 build /Users/jianghai/codes/tms-vue-ele
> node build/build.js
⠋ building for production.../Users/jianghai/codes/tms-vue-ele/node_modules/last-call-webpack-plugin/src/index.js:170
 compiler.hooks.compilation.tap(
 ^
TypeError: Cannot read property 'compilation' of undefined
 at OptimizeCssAssetsWebpackPlugin.apply (/Users/jianghai/codes/tms-vue-ele/node_modules/last-call-webpack-plugin/src/index.js:170:20)
 at Compiler.apply (/Users/jianghai/codes/tms-vue-ele/node_modules/tapable/lib/Tapable.js:375:16)
 at webpack (/Users/jianghai/codes/tms-vue-ele/node_modules/webpack/lib/webpack.js:33:19)
 at err (/Users/jianghai/codes/tms-vue-ele/build/build.js:19:3)
 at next (/Users/jianghai/codes/tms-vue-ele/node_modules/rimraf/rimraf.js:75:7)
 at CB (/Users/jianghai/codes/tms-vue-ele/node_modules/rimraf/rimraf.js:111:9)
 at /Users/jianghai/codes/tms-vue-ele/node_modules/rimraf/rimraf.js:137:14
 at FSReqWrap.oncomplete (fs.js:152:21)

解决: 根据提示,打算一层一层找,首先第一行

at OptimizeCssAssetsWebpackPlugin.apply (/Users/jianghai/codes/tms-vue-ele/node_modules/last-call-webpack-plugin/src/index.js:170:20)

可能是OptimizeCssAssetsWebpackPlugin这个方法的问题,首先上npm找到optimize-css-assets-webpack-plugin这个包

https://www.npmjs.com/package/optimize-css-assets-webpack-plugin

官方提示:
For webpack v3 or below please use optimize-css-assets-webpack-plugin@3.2.0. The optimize-css-assets-webpack-plugin@4.0.0 version and above supports webpack v4.

遂打开package.json,发现webpack版本3.6.0,optimize-css-assets-webpack-plugin版本5.0.1
判断是这个原因,卸载之,重装到3.2.0

npm uninstall optimize-css-assets-webpack-plugin --save-dev
npm i optimize-css-assets-webpack-plugin@3.2.0 --save-dev

然后执行npm run build,成功!

问题解决

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,971评论 1 4
  • 本文主要从一个上线项目的packge.json分析一个上线项目中常见的插件以及为什么会引入这些插件。 通过这些配置...
    Leslie_2386阅读 1,024评论 0 2
  • 本文主要从一个上线项目的packge.json分析一个上线项目中常见的插件以及为什么会引入这些插件。 通过这些配置...
    程序员之路阅读 530评论 0 2
  • 简介 vue cli 3 是一个类似于 create-react-app 的可以用例命令行快速配置和生成一个 vu...
    VioletJack阅读 9,494评论 3 22
  • 爸: 爸,有很多感激、感恩、贴心的话想和你说,却当着你的面说不出口,我们都是不善表达感情的人。可我却很想让您知道我...
    墙角寒梅阅读 108评论 0 0