已经找到了:webpack-dev-server@2.9.1
webpack和--config之间有空格
开头把老师的npm i webpack命令替换成npm install --save webpack@3.10.0就可以了(@后面就是安装时指定的版本号),然后我把其他依赖也安装了视频对应的版本(在package.json里的dependencies,视频的10:37里有显示)就没有报错了
你这个是以 / 开头了,读的是域下的图片了
依赖版本太高,要控制版本
npm install vue-loader
vue-loader 15以上的版本要下载依赖@vue/compiler-sfc
没有装webpack-cli吧,跟老师的版本有区别的,我在学习的时候 vue-loader必须和VueLoaderPlugin搭配使用,否则报错,但是老师那里就没有相关提示
我也是这样
这个是因为版本不兼容导致的,可以在package.json文件里查看webpack-dev-server和webpack-cli的版本是否相同(记得老师用的应该是3.x.x版的),如果webpack-dev-server是3.x.x那就装一个webpck-cli@3.11.2应该就能跑起来了
如果你换成ES5就知道了
this.todos.filter(function(todos) {
return completed === todos.completed
}
老师的课程有些地方已经陈旧了,我在学习的时候用的是现在最新的webpack版本,我的项目源码提交到github上供大家参考 https://github.com/carrieguo/vue.js-todolist
data中的todos数组的每一项todo
在item.vue中v-model="todo.completed",这个是数据得双向绑定
一般我是会因为少了结束的大括号时报这个错误的。而且报错里面有提示unterminated string content 就是没有终止的符号呀
这个我解决了,webpack版本过高的话需要安装html-webpack-plugin和vue-loader-plugin插件,然后webpack.config.js的配置如下:
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const htmlWebpackplugin = require('html-webpack-plugin');
module.exports = {
entry:path.join(__dirname,'src/index.js'),
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test: /\.css$/,
loader: 'css-loader'
},
{
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test:/\.(gif|jpg|jpeg|png|svg)$/,
use:[
{
loader:'url-loader',
options:{
limit:1024,
name:'[name]-aaa.[ext ]'
}
}
]
}
]
},
plugins: [
new htmlWebpackplugin({
}),
new VueLoaderPlugin()
],
}
我这个提示是因为devtool报错,在webpack5+版本下,
config.devtool = isDev ? false : '#cheap-module-eval-source-map'
需要这样设置
webpack 版本高了, 安装webpack@4.x
webpack-cli版本兼容问题吧,先卸载webpack-cli,换其他版本的webpack-cli试试