Vue项目部署到云开发前端网页托管｜unicloud版

前言

当我们想要部署我们的前后端分离项目，由于我们又不想花RMB去购买专用的服务器，而内网穿透免费的一次只能穿透一个端口，怎么办呢 🤔️，小编以前学云开发的时候经常使用前端网页托管，今天给分享大家 😯，实现前后端分别部署：前端Vue项目（部署到前端网页托管，会生成一个临时的公网访问域名，当然有自己的域名可以进行绑定）、后端Spring Boot项目（使用内网穿透部署在本机）；
本篇主要介绍前端Vue项目部署到uniCloud前端网页托管中，后续再更新部署到腾讯云云开发前端网页托管，喜欢的话可以持续关注哦 😍。

unicloud传送门：https://unicloud.dcloud.net.cn/

创建Vue项目

一、检查环境

1.检查`Node`环境

命令行输入：node -v
查看node环境

2.检查`Vue`环境

命令行输入：vue --version
检查Vue环境

二、创建项目

1.项目创建

命令行输入: vue create 项目名

	vue create demo1

小编是用的是Vue CLI v4.5.13，初始的各项选择请根据项目需求选择，这里就不贴图啦

Vue CLI v4.5.13创建项目过程（忽略选择依赖版）视频传送门，点击可播放

2.创建成功

结果如下：
项目创建成功结果
进入项目目录： cd 项目名

3.运行项目

命令行执行：npm run serve
运行项目

4.访问项目

浏览器访问：http://localhost:8080/
运行成功页面1
运行成功页面2

5.项目打包

小编在这里主要用于演示，就不写具体的业务啦，咱们直接打包：

5.1.结束运行

按ctrl + c 结束关闭项目

5.2.修改静态资源目录

注意：打包前还有一步工作要做（要找到修改静态资源的访问路径：默认为/,）修改为./
在package.json的同级目录下创建一个vue.config.js，输入如下命令：

	module.exports = {
	  publicPath: './'
	}

配置静态资源路径

5.3.打包

命令行窗口执行：npm run build
当看到如下界面，证明我们已经打包成功啦，会生成一个dist文件夹
打包成功1
使用ls命令查看项目目录下是否存在dist文件夹
查看dist文件夹
下面我们来看看dist文件夹里边到底有些什么❓
分别执行命令：
cd dist
ls
dist文件夹内容
发现里边存放的就是普通前端项目所需的文件和文件夹：css( 存放样式文件)、js（存放JavaScript文件）、img（存放页面所需的图片文件）、favicon.ico(网站图标)、index.html（页面入口文件）