前言
经过上一篇文章的介绍,已经将这个计算器的计算功能实现了,接下来就是我们项目当中的一个发包上线阶段,我模拟一下,目的就是为了给大家介绍一下,uni-app是如何打包成网页的。
除了可以打包成网页,uni-app还可以打包成小程序、App、H5、快应用等等,后面在单独开文章详细介绍。
正文
接着上篇文章的项目来进行,首先找到项目中的 manifest.json
文件,因为本篇是介绍打包成网页,所以我们要找到 Web配置
:
配置页面标题
页面标题
配置index.html模板路径
index.html模板路径
:指定 Vue HTML模板的路径,默认是项目目录结构下的 index.html,如果你没有修改过,你就不用填写这个信息配置路由模式
路由模式
,分别为 hash
/history
,我这里推荐大家使用 hash
hash
呢?history
部分浏览器器不支持,那么很显然是有问题是吧,所以我这里介绍的比较简单直接,所以直接使用我推荐的 hash 即可好吧配置运行的基础路径
那 index.html 来举个栗子,打开 index.html 文件,当中有 这么一行代码,这行代码里面有一个 src 属性指定的是一个路径
/h5
这代表的是 h5 的资源,将来你也有 app 的资源,你就直接修改这个 src 属性即可我介绍的这些配置呢,都是比较重要的,下面的都不是非常的重要了,但是还是要介绍完毕。
配置启用 Https 协议
配置前端开发服务端口
- 配置启用 https 协议与配置前端开发服务端口是在开发阶段去使用的
- 只需要配置好
页面标题
/index.html模板路径
/路由模式
/运行的基础路径
即可
正式打包
发行
-> 网站-PC Web或手机H5(仅适用于uni-app)(H)
:注意点,账号需验证手机号后才能打包
这是我在发行中遇到的问题,所以给大家介绍到,那么发行之后,首先观察控制台:
给了一个打包之后的路径给我们,后续只要将这个 dist/build/h5
目录下的内容放到你自己的服务器上就可以了,好,到此为止,H5 项目打包就可以打包好了。
单独介绍一下配置运行的基础路径
这个时候我们已经完成好了打包,我们来观察下打包之后的 index.html 文件:
可以看到多了一些 assets
这类似的东西,这个时候如果说我想统一给添加一些前缀,就可以配置运行的基础路径即可,我这里演示一下,例如我要加一个 h5
:
End