vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)

通过Vue渐进式框架写了一个项目,项目写完后,通过npm run bulid 生成上线文件dist。但是在运行npm run bulid这条命令的 时候居然报错,

vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)

提示我什么缺少bulid,打开package.json看了一下,命名在的啊。

vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)

通过与它对应的 node bulid/bulid.js  居然可以。现在通过webpack已经把所有文件进行整合到一起了。

vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)

你不可能之间通过浏览器打开index.html去看我们的结果。打包之后,webpack也有提示:这个文件需要放到一个

HTTP服务器上运行。直接打开index.html是不能工作的。

vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)

所以,这个dist文件是要部署到服务器上的。可以通过node的框架express来生成一个服务器。(要先安装node和express)然后通过express生成一个应用。

1,安装生成器

我们采用全局安装生成器: npm install -g express-generator

 

安装如下:

vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)

2,创建应用

express 项目的名称

vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)

3,安装依赖包

通过提示,我们知道,还需要执行下面两个命令:


vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)

执行如下:

vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)

应用生成器创建完成,把我们dist里边文件放到public文件里边。

vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)

通过npm start运行,然后打开浏览器,输入http://localhost:3000,即可看到项目在开发时的效果了。

vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)