使用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，报错

> [email protected] 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 [email protected]. The [email protected] 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 [email protected] --save-dev

然后执行npm run build，成功！

问题解决