【vue3.0】26.0 某东到家（ 廿六）——不同设备适配和项目上线
作者: 图恩分类: 编程开发阅读: 411发布时间： 2021-12-23 06:32:08
不同设备适配
目前是针对普通手机的屏幕尺寸设计，如果需要适配比如平板电脑，等比例放大，需要进行设备配置。
修改public\index.html
只需要在title后面增加如下代码：
<script>
// 设备屏幕的宽度
var width = document.documentElement.clientWidth || document.body.clientWidth
var ratio = width / 375
var fontSize = 100 * ratio
// 获得第一个html标签
document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px'
</script>
整体代码如下：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<script>
// 设备屏幕的宽度
var width = document.documentElement.clientWidth || document.body.clientWidth
var ratio = width / 375
var fontSize = 100 * ratio
// 获得第一个html标签
document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px'
</script>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
项目上线
新建vue.config.js
// 1. npm run build 打包代码
// 2. 把代码给后端
// 3. 后端把前端代码放入后端工程
// 4. 后端重启后端服务
// * 容易出问题的就是下面的配置
module.exports = {
publicPath: '/moudong'
}
image.png
正在打包中：
image.png
打包完成：
image.png
然后把dist目录发给后端人员即可，由他们去发布。
image.png
到此，本项目学习课程全部结束，之后如有内容都是自己在巨人的肩膀上全新编写。
目前整个项目涉及的所有接口如下：
[{
"name": "获取订单列表",
"url": "/api/order",
"method": "get",
"on": true
}, {
"name": "创建订单",
"url": "/api/createOrder",
"method": "post",
"on": true
}, {
"name": "查询商店的商品列表",
"url": "/api/shop/:id/products",
"method": "get",
"on": true
}, {
"name": "商店详情",
"url": "/api/shop/:id",
"method": "get",
"on": true
}, {
"name": "热门店铺",
"url": "/api/user/hot_list",
"method": "get",
"on": true
}, {
"name": "注册",
"url": "/api/user/register",
"method": "post",
"on": true
}, {
"name": "登录",
"url": "/api/user/login",
"method": "post",
"on": true
}]
接口数据如下：
[{
"delay": 0,
"name": "获取订单列表",
"method": "get",
"url": "/api/order",
"description": "返回商品的所有订单信息，用于前端展示",
"on": 1,
"create_time": "2021-12-02T08:45:54.000Z",
"update_time": "2021-12-02T09:47:07.000Z",
"project": 36763,
"create_user": null,
"folder_id": 0,
"mock_rule": "{\r\n \"code\": 200,\r\n \"data\": [\r\n {\r\n \"address\": {\r\n \"city\": \"北京\",\r\n \"department\": \"xx小区\",\r\n \"houseNumber\": \"门牌号\",\r\n \"name\": \"张三\",\r\n \"phone\": \"18012341234\"\r\n },\r\n \"shopId\": \"1\",\r\n \"shopName\": \"某什么码1\",\r\n \"isCanceled\": false,\r\n \"products\": [\r\n {\r\n \"orderSales\": 5,\r\n \"product\": {\r\n \"name\": \"番茄250g/份\",\r\n \"imgUrl\": \"/i18n/9_16/img/tomato.png\",\r\n \"sales\": 10,\r\n \"price\": 33.6\r\n }\r\n },\r\n {\r\n \"orderSales\": 10,\r\n \"product\": {\r\n \"name\": \"樱桃250g/份\",\r\n \"imgUrl\": \"/i18n/9_16/img/cherry.png\",\r\n \"sales\": 10,\r\n \"price\": 79.6\r\n }\r\n },\r\n {\r\n \"orderSales\": 8,\r\n \"product\": {\r\n \"name\": \"帝王蟹250g/份\",\r\n \"imgUrl\": \"/i18n/9_16/img/crab.png\",\r\n \"sales\": 10,\r\n \"price\": 159.6\r\n }\r\n },\r\n {\r\n \"orderSales\": 4,\r\n \"product\": {\r\n \"name\": \"橙子250g/份\",\r\n \"imgUrl\": \"/i18n/9_16/img/orange.png\",\r\n \"sales\": 10,\r\n \"price\": 92.6\r\n }\r\n }\r\n ]\r\n }\r\n ],\r\n \"desc\": \"成功\"\r\n}\r\n"
}, {
"delay": 0,
"name": "创建订单",
"method": "post",
"url": "/api/createOrder",
"description": null,
"on": 1,
"create_time": "2021-11-29T19:57:00.000Z",
"update_time": "2021-11-29T20:10:42.000Z",
"project": 36763,
"create_user": null,
"folder_id": 0,
"mock_rule": " /**\r\n * 输入\r\n * conten-type：json\r\n * body:{\r\n addressId：“xxx”//收货地址 id\r\n shopId：\"\"//商店id\r\n shopName:\"某什么码1\",\r\n isCanceled:false,//订单是否被取消了\r\n products:[\r\n {\r\n id:\"xxx\",//商品id\r\n num:6//商品数量\r\n }, \r\n {\r\n id:\"xxx\",//商品id\r\n num:6//商品数量\r\n },\r\n ]\r\n }\r\n **/\r\n {\r\n \"code\": 200,\r\n \"data\": { _id: '1',},\r\n \"desc\": \"成功\"\r\n }"
}, {
"delay": 0,
"name": "查询商店的商品列表",
"method": "get",
"url": "/api/shop/:id/products",
"description": "id:动态参数，即商店id\n?tab=all tab（页面左侧tab)，可作为query",
"on": 1,
"create_time": "2021-10-13T17:49:26.000Z",
"update_time": "2021-10-15T12:44:40.000Z",
"project": 36763,
"create_user": null,
"folder_id": 0,
"mock_rule": " {\r\n \"code\": 200,\r\n \"data\": [{\r\n _id: '1',\r\n name: '番茄250g/份',\r\n imgUrl: '/i18n/9_16/img/tomato.png',\r\n sales: 10,\r\n price: 33.6,\r\n oldPrice: 39.6\r\n },\r\n {\r\n _id: '2',\r\n name: '樱桃250g/份',\r\n imgUrl: '/i18n/9_16/img/cherry.png',\r\n sales: 10,\r\n price: 79.6,\r\n oldPrice: 59.6\r\n },\r\n {\r\n _id: '3',\r\n name: '帝王蟹250g/份',\r\n imgUrl: '/i18n/9_16/img/crab.png',\r\n sales: 10,\r\n price: 159.6,\r\n oldPrice: 149.6\r\n },\r\n {\r\n _id: '4',\r\n name: '橙子250g/份',\r\n imgUrl: '/i18n/9_16/img/orange.png',\r\n sales: 10,\r\n price: 92.6,\r\n oldPrice: 85.6\r\n }\r\n ],\r\n \"desc\": \"成功\"\r\n }"
}, {
"delay": 300,
"name": "商店详情",
"method": "get",
"url": "/api/shop/:id",
"description": "id为动态参数，为商店店铺id",
"on": 1,
"create_time": "2021-07-19T04:34:47.000Z",
"update_time": "2021-10-13T16:20:01.000Z",
"project": 36763,
"create_user": null,
"folder_id": 0,
"mock_rule": "{\r\n \"code\": 200,\r\n \"data\": {\r\n id: '1',\r\n name: '某什么玛1',\r\n imgUrl: '/i18n/9_16/img/near.png',\r\n sales: 200,\r\n expressLimit: 0,\r\n expressPrice: 5,\r\n slogon: 'VIP尊享xx元减x元运费券(每月x张)'\r\n },\r\n \"desc\": \"成功\"\r\n}"
}, {
"delay": 300,
"name": "热门店铺",
"method": "get",
"url": "/api/user/hot_list",
"description": "热门店铺",
"on": 1,
"create_time": "2021-07-17T14:54:21.000Z",
"update_time": "2021-07-19T03:09:54.000Z",
"project": 36763,
"create_user": null,
"folder_id": 0,
"mock_rule": "{\r\n code: 200,\r\n data: [\r\n {\r\n id: '1',\r\n name: '某什么玛1',\r\n imgUrl: '/i18n/9_16/img/near.png',\r\n sales: 1000,\r\n expressLimit: 0,\r\n expressPrice: 5,\r\n slogon: 'VIP尊享xx元减x元运费券(每月x张)'\r\n },\r\n {\r\n id: '2',\r\n name: '某什么玛2',\r\n imgUrl: '/i18n/9_16/img/near.png',\r\n sales: 2000,\r\n expressLimit: 0,\r\n expressPrice: 5,\r\n slogon: 'VIP尊享xx元减x元运费券(每月x张)'\r\n },\r\n {\r\n id: '3',\r\n name: '某什么玛3',\r\n imgUrl: '/i18n/9_16/img/near.png',\r\n sales: 200,\r\n expressLimit: 0,\r\n expressPrice: 5,\r\n slogon: 'VIP尊享xx元减x元运费券(每月x张)'\r\n },\r\n {\r\n id: '4',\r\n name: '某什么玛4',\r\n imgUrl: '/i18n/9_16/img/near.png',\r\n sales: 100,\r\n expressLimit: 0,\r\n expressPrice: 5,\r\n slogon: 'VIP尊享xx元减x元运费券(每月x张)'\r\n }\r\n ],\r\n desc: '成功'\r\n}"
}, {
"delay": 300,
"name": "注册",
"method": "post",
"url": "/api/user/register",
"description": "注册保存",
"on": 1,
"create_time": "2021-07-17T04:32:34.000Z",
"update_time": "2021-07-17T14:40:09.000Z",
"project": 36763,
"create_user": null,
"folder_id": 0,
"mock_rule": "{\r\n \"code\": 200,\r\n \"data\": {\r\n },\r\n \"desc\": \"成功\"\r\n}"
}, {
"delay": 300,
"name": "登录",
"method": "post",
"url": "/api/user/login",
"description": "登录验密",
"on": 1,
"create_time": "2021-07-16T15:28:29.000Z",
"update_time": "2021-07-17T04:32:56.000Z",
"project": 36763,
"create_user": null,
"folder_id": 0,
"mock_rule": "{\r\n \"code\": 200,\r\n \"data\": {\r\n \r\n },\r\n \"desc\": \"成功\"\r\n}"
}]
发表评论 (审核通过后显示评论)：