vue安装、打包、发布

一.安装:

打开cmd命令行依次输入下面命令:

1. npm install -g @vue/cli
2. vue create vue-demo(项目名)
3. 运行项目 npm run serve

二.打包:

在vscode打开终端输入以下命令:

npm run build

打包成功后会生成一个dist文件夹:

三.发布:

发布有多种方式,现在介绍两种:

1.express

打开vscode,新建一个文件夹(例如:vuetest),把打包好的dist文件夹放到vuetest目录下,打开终端,输入以下命令安装express:

npm install express body-parser --save

安装好后创建一个app.js文件,输入:

运行以下命令即发布成功:

node app.js

2.nginx

a.下载nginx

http://nginx.org/en/download.html     ,下载后解压,解压后如下:

b.把打包好的dist文件夹放到html目录下

c.修改nginx配置

打开nginx目录下的、conf文件夹下的nginx.conf文件

进行配置:

d.启动nginx:

有很多种方法启动nginx

(1)直接双击nginx.exe,双击后一个黑色的弹窗一闪而过

(2)打开命令窗口,切换到nginx解压目录下,输入命令 nginx.exe 或者 start nginx ,回车即可

tips:可以在cmd命令窗口输入命令 tasklist /fi "imagename eq nginx.exe" ,出现如下结果说明启动成功

测试,打开浏览器输入localhost, 注意端口号必须要跟nginx上面配置一样

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值