当前项目需要用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，成功！
问题解决
网友评论