Vue初学32-搭建本地服务器

在项目开发测试的时候,每次修改了代码都要执行命令npm run build重新打包,非常繁琐。通过搭建本地服务器,测试的时候能够实时刷新,测试完成后,只在发布的时候打包一次,避免了每次修改都要重新打包。

首先,通过命令安装本地服务器模块,为了与webpack版本匹配,指定下版本。

npm install [email protected] --save-dev     

安装完成后,在webpack.config.js中添加如下配置

contentBase指定为哪一个文件夹提供服务,默认是根文件夹

inline指定页面是否实时刷新,true表示实时刷新

此外,还可以指定port端口号

Vue初学32-搭建本地服务器_第1张图片 

 package.json的scripts中添加命令,其中--open表示执行完成后自动打开浏览器

Vue初学32-搭建本地服务器_第2张图片

执行命令 npm run dev,启动本地服务器,并打开网页

Vue初学32-搭建本地服务器_第3张图片

前端页面修改后会自动刷新网页,例如,前端页面添加一个按钮

Vue初学32-搭建本地服务器_第4张图片

 

 

 

你可能感兴趣的:(vue)