vue官方学习网站: https://cn.vuejs.org/
1.在package.js中配置
在scripts:标签中加入一行
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --config webpack.config.js"
},
2.修改webpack.config.js 文件,使之适应webpack-dev-server的开发环境
因为配置文件同时用在正式坏境和开发坏境,所以配置要根据不同的坏境进行判断
在控制台安装cross-env
cross-env的作用:因为在不同平台上,设置坏境变量的方式是不一样的,主要是mac和window上的方式不一样
更改build和dev的配置方式如下
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
3.在webpack.config.js中进行判断
(1)定义一个常量isDev,判断是否为开发坏境
const isDev = process.env.NODE_ENV === 'development'
(2)用一个定义的常量config来代替module.exports
(3)判断如果是开发坏境,就进行如下设置
if(isDev) {
config.devSever = {
port: 8000,
host: '0.0.0.0', //这样设置可以让其他电脑也可以访问本本页面,因为可以通过ip地址访问
overlay: { //在编译过程中有任何错误,可以显示在网页上
errors: true,
}
//open:true
//hot: true
}
}
注:是在webpack2以后才开始加入,之前是没有的,open:true的目的是在每次启动webpack-dev-server的时候自动打开浏览器,但是我们这里不用,因为不方便,
hot:true 在开发单页面的时候,页面会有很多数据,如果每次一改代码,整个页面就会刷新,有时候会导致整个页面中的数据就会消失,hot的功能是如果我们只修改了页面中某个组件的代码,那么只有这个组件中的数据会发生变化,但是其他部分不会发生变化,
4.设置项目的入口html
项目要能正常运行,就要有一个入口文件html
(1)安装插件html-webpck-olugin
cnpm install --save html-webpack-plugin
(2)在webpack.config.js中插入一个定义的变量
const HTMLPlugin = require('html-webpack-plugin')
(3)在webpack配置中加入写入下面部分,写就行
在这里插入代码片
5.hot:true如何使用
if(isDev) {
config.devtool ='#cheap-module-eval-source-map' //用来调试代码
config.devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
errors: true,
},
hot: true
}
//下面这部分如果使用hot,就加进去
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}
将代码改成如上形式,然后就可以了