编写webpack配置文件

安装包

1
2
3
4
5
6
7
8
npm install --save-dev vue-loader@8 babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 css-loader vue-style-loader vue-hot-reload-api@1 vue-html-loader

npm install --save-dev webpack-merge
npm install --save-dev html-webpack-plugin
npm install --save-dev webpack-dev-server

npm install vue-router
npm install vuex

注意事项




Invalid configuration object. Webpack has been initialised using a configuration object that does not ma
tch the API schema. - configuration has an unknown property ‘mode’. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?,
recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
在网上查阅了相关资料，有的说是module.loaders需要改成module.rules，有的说是需要删掉项目依赖，然后重新安装一遍并且webpack-dev-server要全局安装，我仔细看了一下跟我的demo情况都不太符合，然后我看了一下视频教程中的webpack-dev-server的版本是2.9.7的，而我安装的是v3.2.1的，我在想是不是版本兼容问题，然后去webpack-dev-server的github网站上查看了版本发布日志，发现了这个东西


在webpack-dev-server的3.0.0版本开始，只兼容webpack4及以上版本，不再兼容webpack3及一下版本了，然后我就将项目中的webpack-dev-server的npm包删掉，重新下载并且指定版本: npm install webpack-dev-server@2.9，然后npm就帮我下了v2.9.7的包，然后我再运行一遍node_modules/.bin/webpack-dev-server就能成功开启服务器了。

所以以后遇到这种感觉不像是webpack配置问题，并且终端报错中没有明确指出是哪一块的问题的，可以仔细检查一下是否webpack或某些包和新版本的包存在某些兼容问题

Vue packages version mismatch:

在升级脚手架到vue-cli3.0版本的时候出现了这个报错：


我在这里大概说一下出现这个报错的原因在哪里和解决办法

原因
vue有两种形式的代码 compiler（模板）模式和runtime模式（运行时），vue模块的package.json的main字段默认为runtime模式， 指向了”dist/vue.runtime.common.js”位置。

这是vue升级到2.0之后就有的特点。

而我的app.vue文件中，初始化vue却是这么写的，这种形式为compiler模式的，所以就会出现上面的错误信息

1
2
3
4
5
6
7
8
// compiler
new Vue({
  el: '#app',
  router: router,
  store: store,
  template: '<App/>',
  components: { App }
})

解决办法
将app.vue中的代码修改如下就可以

1
2
3
4
5
6
//runtime
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app")

到这里我们的问题还没完，那为什么之前是没问题的，之前vue版本也是2.x的呀？

这也是我要说的第二种解决办法

因为之前我们的webpack配置文件里有个别名配置，具体如下

1
2
3
4
5
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式  vue结尾的
    }
}

也就是说，import Vue from ‘vue’ 这行代码被解析为 import Vue from ‘vue/dist/vue.esm.js’，直接指定了文件的位置，没有使用main字段默认的文件位置

所以第二种解决方法就是，在vue.config.js文件里加上webpack的如下配置即可，

1
2
3
4
5
resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
}

既然到了这里我想很多人也会想到第三中解决方法，那就是在引用vue时，直接写成如下即可

1
import Vue from 'vue/dist/vue.esm.js'

配置Vuex

1
2
3
4
5
6
7
其他 几个概念：
state：状态，即数据 ;
store：数据的集合，一个vuex引用，仅有一个store，包含n个state
mutation：state不能直接赋值，通过mutation定义最基本的操作
action：在action中调用一个或多个mutation
getter：state不能直接取值，使用getter返回需要的state
module：store和state之间的一层，便于大型项目管理，store包含多个module，module包含state、mutation和action