Vue+Webpack压缩打包及上线流程

一、 使用Webpack+Babel打包Vue项目
步骤:
1、 安装babel相关的包

图片1.png

npm install babel-core babel-loader babel-preset-env –save-dev
2、 在项目根目录下创建一个babel的配置文件.babelrc

图片2.png

3、 在.babelrc中配置写好对应的json代码片段

图片3.png

代码片段

1.png

4、 在webpack.config.js中使用babel-loader

图片4.png

5、 在webpack.config.js的插件配置中写上如下代码即可

图片5.png

6、在当前项目中的根目录下，运行webpack --progress打包即可

图片6.png

二、 使用Express开启Web服务，通过网络访问Vue项目
步骤:
1、将index.html、bundle.js放在对应的文件夹下面

图片7.png

2、在server.js写好对应的代码

图片8.png

3、在终端中使用 node server开启web服务

图片9.png

4、在浏览器中输入127.0.0.1:3000/index.html，即可看到效果

图片10.png