WebStorm打包vue项目并且部署

WebStorm打包vue项目并且部署

打包项目

1. 使用 WebStorm 打开项目，在 WebStorm 的终端输入添加依赖命令

> npm install

2. 打包

> npm run build

打包完成后，会在项目根目录下生成一个 dist 文件夹，里面的文件就是需要部署的前端静态文件。

部署项目

1. 全局安装 express-generator 生成器

> npm install express-generator -g

2. 创建项目部署目录
   使用 Node.js 命令提示工具进入项目部署根目录，使用 express 创建项目目录。

> npm express hell-world

3. 进入 hello-world 目录，安装依赖

> cd hello-world
> npm install

4. 将之前 dist 目录下的所有文件复制到 hello-world 的 public 目录下

5. 运行项目

> npm start

6. 在浏览器地址栏输入 127.0.0.1:3000 ，【回车】就可以看到发布的项目。

参考文章

1. https://blog.youkuaiyun.com/weixin_43085797/article/details/105834457