vue项目经过webpack打包生成的dist文件放到express环境里运行（vue+webpack+express）

时间 2019-11-11

标签 vue 项目经过 webpack 打包生成 dist 文件放到 express 环境运行 vue+webpack+express 繁體版

原文原文链接

1.首先须要的原料确定是vue打包生成的dist文件

在vue项目目录下运行：npm run build，等待运行结束，会在项目目录下生成一个dist文件夹，里面会生成一些文件(以下图示)vue

小的项目文件会少些、、node

能运行起来npm run build我就默认你们不是小白喽，这边一样须要node环境，在环境中运行express

npm install -g express-generator

等待安装完毕，可经过运行：express --version验证express是否安装成功（以下图示）npm

在个人电脑某盘符下，运行浏览器

express myProject

其中的myProject即为最终的服务器文件夹名称，可自定义。服务器

等待安装完成，运行ui

cd myProject

进入项目，安装依赖spa

npm i

到此，本地服务器建立完成。打开服务器目录（以下图示）code

将vue打包生成的dist文件夹下的文件复制、粘贴至上图示中的public目录下（以下图示）server

箭头所指为dist目录下文件（项目内容不一样，生成文件会有所不一样），其他为默认文件，不用理会。

此时，运行

npm start

而后打开浏览器，输入http://localhost:3000，便可看到项目在上线后的效果了。

另外一种简单的方法，使用live-server第三方包。

首先全局安装live-server： npm install -g live-server

而后在打包好的目录下运行：live-server --port=9527

项目就会自动打开，超级方便吧！

后记：查看本机全局安装的npm包命令：npm list -g --depth 0

到此vue打包后的项目便可在本地预览，全篇结束。