前端Vue项目打包部署，Window系统+腾讯云服务器+vue项目

山上核蛋蛋
273 阅读1分钟

目录：

  1. 准备工作
  2. 初始化前端项目
  3. 服务器安装Nginx
  4. 启动nginx
  5. 修改nginx配置
  6. 新建网站文件夹
  7. 打包部署vue项目

一、准备工作

  • 完整的Vue项目
  • 一台服务器

二、初始化vue项目 使用Vue-cli脚手架初始化一个最基本的Vue项目，命令如下：vue create myproject

image.png

image.png

运行项目，命令如下：npm run serve

image.png

image.png

三、服务器安装nginx nginx是一个高性能的HTTP和反向代理web服务器。作为Web服务器，nginx处理静态文件、索引文件以及自动索引效率非常高。

登录服务器

方式一：通过网页状态访问

image.png

登录服务器

方式二：远程控制的方式连接 打开运行 输入 mstsc

image.png

image.png

登录成功

image.png

下载nginx

image.png

image.png

在nginx文件根目录下cmd进行运行，输入启动命令：start nginx

image.png

image.png

查看是否启动成功，浏览器输入： localhost:80

image.png

说明启动成功

五、修改nginx配置

修改nginx.conf，可以看到默认监听的是80端口，所以我们直接访问服务器ip，端口改为1234

image.png

image.png

重启nginx服务，命令：nginx –s reload

image.png

浏览器输入：http://1.116.9.126:1234/

image.png 说明修改配置成功

六、新建网站文件夹

root：网站页面路径，也就是网站存放的路径。

image.png

新建home文件夹，修改root为home/dist, 此时home内还没有dist文件，因为我们待会儿vue项目打包就会生成dist文件。 重启nginx

image.png

七、打包部署vue项目

使用vue打包命令,生成dist文件夹：npm run build

image.png

image.png

将vue项目打包生成的dist文件拷贝到nginx的home文件夹中

image.png

查看是否部署成功，浏览器输入：  http://1.116.9.126:1234/

image.png

avatar
文章
阅读
粉丝