当前项目需要用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,成功!
问题解决