@@ -1,4 +1,4 @@ | |||||
<template> | |||||
<!-- <template> | |||||
<div class="Box"> | <div class="Box"> | ||||
<div class="title">遂芒科技</div> | <div class="title">遂芒科技</div> | ||||
<div class="cont"> | <div class="cont"> | ||||
@@ -128,4 +128,4 @@ export default { | |||||
} | } | ||||
} | } | ||||
</style> | </style> | ||||
--> |
@@ -14,7 +14,8 @@ | |||||
</div> | </div> | ||||
<div class="module_1"> | <div class="module_1"> | ||||
<video ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> | |||||
<!-- <video ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> --> | |||||
<video ref="vidoe" src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> | |||||
<div class="titleBox" @click="goLogin"> | <div class="titleBox" @click="goLogin"> | ||||
<div class="title_item1" v-if="characters == 1">打造自主数字人IP</div> | <div class="title_item1" v-if="characters == 1">打造自主数字人IP</div> | ||||
<div class="title_item2" v-if="characters == 1">沉淀数字资产</div> | <div class="title_item2" v-if="characters == 1">沉淀数字资产</div> | ||||
@@ -62,7 +63,7 @@ | |||||
<div class="module_3" id="module_3"> | <div class="module_3" id="module_3"> | ||||
<div class="imgBox1"> | <div class="imgBox1"> | ||||
<img src="../../assets/img/module_3_1.png" alt /> | |||||
<img src="https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/module_3_1.png" alt /> | |||||
</div> | </div> | ||||
<!-- <div class="imgBox2"> | <!-- <div class="imgBox2"> | ||||
<img src="../../assets/img/module_3_2.png" alt> | <img src="../../assets/img/module_3_2.png" alt> | ||||
@@ -93,12 +94,12 @@ | |||||
<img src="../../assets/img/module_3_1.png" alt> | <img src="../../assets/img/module_3_1.png" alt> | ||||
</div>--> | </div>--> | ||||
<div class="imgBox2"> | <div class="imgBox2"> | ||||
<img src="../../assets/img/module_3_2.png" alt /> | |||||
<img src="https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/module_3_2.png" alt /> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="module_5" id="module_5"> | <div class="module_5" id="module_5"> | ||||
<img src="../../assets/img/module_5_bg2.png" alt class="module_5_bg1" /> | |||||
<img src="https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/module_5_bg2.png" alt class="module_5_bg1" /> | |||||
<div class="titleBox"> | <div class="titleBox"> | ||||
<div class="title"> | <div class="title"> | ||||
{{ characters == 1 ? '快速 高效 完美' : 'Flexible and Vivid Avatar' }} | {{ characters == 1 ? '快速 高效 完美' : 'Flexible and Vivid Avatar' }} | ||||
@@ -399,56 +400,56 @@ export default { | |||||
dialogVisible: false, | dialogVisible: false, | ||||
module_6_data: [ | module_6_data: [ | ||||
{ | { | ||||
url: require('../../assets/img/demo_4.png'), | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_4.png', | |||||
name: '教育', | name: '教育', | ||||
name_y: 'Education', | name_y: 'Education', | ||||
des: '创新和丰富的学习体验', | des: '创新和丰富的学习体验', | ||||
des_y: 'Innovative & richinng the learning experience' | des_y: 'Innovative & richinng the learning experience' | ||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/demo_3.png'), | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_3.png', | |||||
name: '金融', | name: '金融', | ||||
name_y: 'Finance', | name_y: 'Finance', | ||||
des: '加强客户服务,通过新颖的互动方式与客户搭建沟通桥梁', | des: '加强客户服务,通过新颖的互动方式与客户搭建沟通桥梁', | ||||
des_y: 'Enhance customer service, engage client relations through new innteravtive ways' | des_y: 'Enhance customer service, engage client relations through new innteravtive ways' | ||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/demo_5.png'), | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_5.png', | |||||
name: ' 电商', | name: ' 电商', | ||||
name_y: 'E-commerce', | name_y: 'E-commerce', | ||||
des: '7*24全天候数字员工线上销售和品牌推广', | des: '7*24全天候数字员工线上销售和品牌推广', | ||||
des_y: '7*24 employee online selling & brands promotion' | des_y: '7*24 employee online selling & brands promotion' | ||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/demo_7.png'), | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_7.png', | |||||
name: '零售与品牌', | name: '零售与品牌', | ||||
name_y: 'Retails', | name_y: 'Retails', | ||||
des: '数字广告代言人以前所未有的方式打造品牌', | des: '数字广告代言人以前所未有的方式打造品牌', | ||||
des_y: 'Branding in a different new way by digital Ads endorsers.' | des_y: 'Branding in a different new way by digital Ads endorsers.' | ||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/demo_1.png'), | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_1.png', | |||||
name: '技术服务', | name: '技术服务', | ||||
name_y: 'Avatar tech provider', | name_y: 'Avatar tech provider', | ||||
des: '可以将创造的数字人形象、行为和全部交互轻松的部署到自己的应用服务中', | des: '可以将创造的数字人形象、行为和全部交互轻松的部署到自己的应用服务中', | ||||
des_y: 'Provide all capability of avatar creation, manipulation & interactive of metavatar to deploy them in your own applications.' | des_y: 'Provide all capability of avatar creation, manipulation & interactive of metavatar to deploy them in your own applications.' | ||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/demo_2.png'), | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_2.png', | |||||
name: '娱乐', | name: '娱乐', | ||||
name_y: 'Entertaining', | name_y: 'Entertaining', | ||||
des: '让您在元宇宙中拥有时尚靓丽的数字孪生', | des: '让您在元宇宙中拥有时尚靓丽的数字孪生', | ||||
des_y: 'Exiciting etertaning experience by digital twins, stylishing the pictures & video, great looking avatars in metaverse.' | des_y: 'Exiciting etertaning experience by digital twins, stylishing the pictures & video, great looking avatars in metaverse.' | ||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/demo_6.png'), | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_6.png', | |||||
name: '影视特效 ', | name: '影视特效 ', | ||||
name_y: 'Special Effects', | name_y: 'Special Effects', | ||||
des: '通过Ai技术在电影特效中使用虚拟角色,极大的提高了效率,加强视觉效果', | des: '通过Ai技术在电影特效中使用虚拟角色,极大的提高了效率,加强视觉效果', | ||||
des_y: 'A.I. technology for avatars deployed in movie special effects, great enhancement of effects production.' | des_y: 'A.I. technology for avatars deployed in movie special effects, great enhancement of effects production.' | ||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/demo_8.png'), | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_8.png', | |||||
name: '公共服务', | name: '公共服务', | ||||
name_y: 'Public Sector', | name_y: 'Public Sector', | ||||
des: '当人们需要帮助和助手时,数字公共服务人员24*7随时为您的繁重工作待命', | des: '当人们需要帮助和助手时,数字公共服务人员24*7随时为您的繁重工作待命', | ||||
@@ -457,30 +458,30 @@ export default { | |||||
], | ], | ||||
carouselLsit: [ | carouselLsit: [ | ||||
{ | { | ||||
url: require('../../assets/img/carousel1.png') | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel1.png' | |||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/carousel2.png') | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel2.png' | |||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/carousel3.png') | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel3.png' | |||||
} | } | ||||
], | ], | ||||
partnerLsit: [ | partnerLsit: [ | ||||
{ | { | ||||
url: require('../../assets/img/partner1.png') | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/partner1.png' | |||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/partner2.png') | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/partner2.png' | |||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/partner3.png') | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/partner3.png' | |||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/partner4.png') | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/partner4.png' | |||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/partner5.png') | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/partner5.png' | |||||
} | } | ||||
], | ], | ||||
timeLsit: [ | timeLsit: [ | ||||
@@ -492,7 +493,7 @@ export default { | |||||
// ctn2: "团队组建" | // ctn2: "团队组建" | ||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/carousel2.png'), | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel2.png', | |||||
title: '2019', | title: '2019', | ||||
ctn1_y: 'Deliver the first movie project in May. 2019', | ctn1_y: 'Deliver the first movie project in May. 2019', | ||||
// ctn2_y: "Deliver the first movie project in May. 2019", | // ctn2_y: "Deliver the first movie project in May. 2019", | ||||
@@ -500,7 +501,7 @@ export default { | |||||
ctn2: '项目交付' | ctn2: '项目交付' | ||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/carousel3.png'), | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel3.png', | |||||
title: '2021-05', | title: '2021-05', | ||||
ctn1_y: 'Beta of MetaGene published in May,2021', | ctn1_y: 'Beta of MetaGene published in May,2021', | ||||
// ctn2_y: "Beta of MetaGene published in May,2021", | // ctn2_y: "Beta of MetaGene published in May,2021", | ||||
@@ -509,7 +510,7 @@ export default { | |||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/carousel3.png'), | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel3.png', | |||||
title: '2021-08', | title: '2021-08', | ||||
ctn1_y: 'Metavatar built up in Aug, 2021', | ctn1_y: 'Metavatar built up in Aug, 2021', | ||||
// ctn2_y: "Metavatar built up in Aug, 2021", | // ctn2_y: "Metavatar built up in Aug, 2021", | ||||
@@ -517,7 +518,7 @@ export default { | |||||
// ctn2: "邃芒科技成立", | // ctn2: "邃芒科技成立", | ||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/carousel3.png'), | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel3.png', | |||||
title: '2022-01', | title: '2022-01', | ||||
ctn1_y: 'Angel fund in Jan, 2022', | ctn1_y: 'Angel fund in Jan, 2022', | ||||
// ctn2_y: "Angel fund in Jan, 2022", | // ctn2_y: "Angel fund in Jan, 2022", | ||||
@@ -525,7 +526,7 @@ export default { | |||||
// ctn2: "获得天使轮融资", | // ctn2: "获得天使轮融资", | ||||
}, | }, | ||||
{ | { | ||||
url: require('../../assets/img/carousel3.png'), | |||||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel3.png', | |||||
title: '2022-06', | title: '2022-06', | ||||
ctn1_y: 'Deliver the first project based on Magenta for our strategic partner in Jun,2022', | ctn1_y: 'Deliver the first project based on Magenta for our strategic partner in Jun,2022', | ||||
// ctn2_y: "Beta of MetaGene published in May,2021", | // ctn2_y: "Beta of MetaGene published in May,2021", | ||||
@@ -1,141 +0,0 @@ | |||||
<template> | |||||
<div class="Box"> | |||||
<div class="topBox"> | |||||
<div class="title1">生动有趣</div> | |||||
<div class="title2">主流艺术风格让您的照片多姿多彩</div> | |||||
<div class="title3">让您在社交媒体上展示个性自我</div> | |||||
<div class="btn">立刻体验</div> | |||||
</div> | |||||
<div class="vdBox"></div> | |||||
<div class="caseBox"> | |||||
<div class="title">邃芒ai数字人10大个性化特点</div> | |||||
<div class="caseLsit"> | |||||
<div class="itemBox" v-for="(item,index) in 10" :key="index"> | |||||
<img src="../../assets/img/styleAdd1.png" alt> | |||||
<div class="itemCont">文案</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { mapState } from "vuex"; | |||||
export default { | |||||
data() { | |||||
return {}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
characters: state => state.publicObj.characters | |||||
}) | |||||
} | |||||
}; | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.Box { | |||||
margin-top: 70px; | |||||
// background-color: #202020; | |||||
overflow: hidden; | |||||
.topBox { | |||||
height: 1080px; | |||||
background: #202020; | |||||
background-image: url("../../assets/img/styleAdd_bg.png"); | |||||
background-repeat: no-repeat; | |||||
// background-size: 100% 100%; | |||||
background-position-x: 854px; | |||||
background-position-y: 300px; | |||||
overflow: hidden; | |||||
.title1 { | |||||
margin-left: 192px; | |||||
margin-top: 371px; | |||||
font-size: 48px; | |||||
font-family: Source Han Sans CN; | |||||
font-weight: 400; | |||||
color: #ffffff; | |||||
line-height: 62px; | |||||
} | |||||
.title2 { | |||||
margin-left: 192px; | |||||
font-size: 48px; | |||||
font-family: Source Han Sans CN; | |||||
font-weight: 400; | |||||
color: #ffffff; | |||||
line-height: 62px; | |||||
} | |||||
.title3 { | |||||
margin-left: 192px; | |||||
font-size: 16px; | |||||
font-family: Source Han Sans CN; | |||||
font-weight: 400; | |||||
color: #fefefe; | |||||
line-height: 62px; | |||||
} | |||||
.btn { | |||||
margin-top: 60px; | |||||
margin-left: 192px; | |||||
width: 220px; | |||||
height: 60px; | |||||
border: 2px solid #ffffff; | |||||
border-radius: 30px; | |||||
font-size: 18px; | |||||
font-family: Source Han Sans CN; | |||||
font-weight: 400; | |||||
color: #ffffff; | |||||
line-height: 62px; | |||||
text-align: center; | |||||
cursor: pointer; | |||||
} | |||||
} | |||||
.vdBox { | |||||
height: 1080px; | |||||
background-image: url("../../assets/img/vd.png"); | |||||
background-repeat: no-repeat; | |||||
background-size: 100% 100%; | |||||
} | |||||
.caseBox { | |||||
height: 1080px; | |||||
background: #fff; | |||||
overflow: hidden; | |||||
.title { | |||||
text-align: center; | |||||
font-size: 24px; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #232324; | |||||
line-height: 62px; | |||||
margin: 120px 0; | |||||
} | |||||
.caseLsit { | |||||
width: 1280px; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
flex-wrap: wrap; | |||||
margin: 0 auto; | |||||
.itemBox { | |||||
width: 240px; | |||||
height: 240px; | |||||
position: relative; | |||||
margin-bottom: 20px; | |||||
img { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
.itemCont { | |||||
width: 100%; | |||||
font-size: 14px; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #ffffff; | |||||
line-height: 24px; | |||||
text-align: center; | |||||
position: absolute; | |||||
left: 0; | |||||
bottom: 26px; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> | |||||
@@ -21,11 +21,6 @@ const routes = [ | |||||
name: 'aboutUs', | name: 'aboutUs', | ||||
component: () => import("../components/aboutUs/aboutUs"), | component: () => import("../components/aboutUs/aboutUs"), | ||||
}, | }, | ||||
{ | |||||
path: '/styleAdd', | |||||
name: 'styleAdd', | |||||
component: () => import("../components/styleAdd/styleAdd"), | |||||
}, | |||||
// 登录 | // 登录 | ||||
{ | { | ||||
path: '/login', | path: '/login', | ||||
@@ -36,8 +36,8 @@ | |||||
<!-- 渐变遮罩层 --> | <!-- 渐变遮罩层 --> | ||||
<div class="waterFall-item-mask"> | <div class="waterFall-item-mask"> | ||||
<div>{{ item.title || '无标题' }}</div> | <div>{{ item.title || '无标题' }}</div> | ||||
<div>视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||||
<div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||||
<div v-if="item.videoStatus == 5">视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||||
<div v-if="item.videoStatus == 5">视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||||
<div>创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | <div>创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | ||||
</div> | </div> | ||||
<!-- 视频状态 草稿还是未完成还是失败 0草稿,1246生成中,3失败,5成功--> | <!-- 视频状态 草稿还是未完成还是失败 0草稿,1246生成中,3失败,5成功--> | ||||
@@ -71,8 +71,10 @@ | |||||
<div v-if="videoList.length > 0" class="videoModel" :key="index"> | <div v-if="videoList.length > 0" class="videoModel" :key="index"> | ||||
<!-- 左侧图片 --> | <!-- 左侧图片 --> | ||||
<div class="videoPrv" @click="goDetail(item)"> | <div class="videoPrv" @click="goDetail(item)"> | ||||
<img src="../../assets/img/BG@2x.png" /> | |||||
<div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||||
<!-- <img src="../../assets/img/BG@2x.png" /> --> | |||||
<img src="../../assets/img/logoh.png" /> | |||||
<!-- <div v-if="item.videoStatus == 0" class="cover">草稿</div> --> | |||||
<div v-if="item.videoStatus == 0" class="cover"></div> | |||||
<div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | <div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | ||||
<div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | ||||
<!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> --> | <!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> --> | ||||
@@ -166,8 +168,10 @@ export default { | |||||
pageSize: 6, | pageSize: 6, | ||||
prePage: '', | prePage: '', | ||||
total: '', | total: '', | ||||
defaultImg: require('@/assets/img/BG@2x.png'), //默认图片 | |||||
defaultImg1: require('@/assets/img/bg.png'), //默认图片 | |||||
// defaultImg: require('@/assets/img/BG@2x.png'), //默认图片 | |||||
// defaultImg1: require('@/assets/img/bg.png'), //默认图片 | |||||
defaultImg: require('@/assets/img/logoh.png'), //默认图片 | |||||
defaultImg1: require('@/assets/img/logoh.png'), //默认图片 | |||||
listActive: 1 // 显示列表样式 | listActive: 1 // 显示列表样式 | ||||
}; | }; | ||||
}, | }, | ||||
@@ -512,8 +516,9 @@ export default { | |||||
// background-color: #979797; | // background-color: #979797; | ||||
img { | img { | ||||
position: absolute; | position: absolute; | ||||
top: 25px; | |||||
width: 140px; | width: 140px; | ||||
height: 100px; | |||||
height: 50px; | |||||
border-radius: 6px; | border-radius: 6px; | ||||
} | } | ||||
.cover { | .cover { | ||||
@@ -533,6 +538,7 @@ export default { | |||||
white-space: nowrap; | white-space: nowrap; | ||||
overflow: hidden; | overflow: hidden; | ||||
text-overflow: ellipsis; | text-overflow: ellipsis; | ||||
margin-top: 10px; | |||||
.videoName { | .videoName { | ||||
width: 100%; | width: 100%; | ||||
font-size: 16px; | font-size: 16px; | ||||
@@ -748,6 +754,8 @@ export default { | |||||
position: relative; | position: relative; | ||||
border-radius: 12px; | border-radius: 12px; | ||||
overflow: hidden; | overflow: hidden; | ||||
// min-width: 200px; | |||||
min-height: 100px; | |||||
} | } | ||||
img { | img { | ||||
max-width: 100%; | max-width: 100%; | ||||
@@ -760,7 +768,7 @@ export default { | |||||
left: 0; | left: 0; | ||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
justify-content: space-around; | |||||
justify-content: flex-end; | |||||
padding: 5px 8px 5px; | padding: 5px 8px 5px; | ||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); | background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); | ||||
height: 80px; | height: 80px; | ||||
@@ -770,6 +778,7 @@ export default { | |||||
overflow: hidden; | overflow: hidden; | ||||
white-space: nowrap; | white-space: nowrap; | ||||
text-overflow: ellipsis; | text-overflow: ellipsis; | ||||
margin-bottom: 3px; | |||||
} | } | ||||
} | } | ||||
&-state { | &-state { | ||||
@@ -1,5 +1,6 @@ | |||||
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | // const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | ||||
const CompressionWebpackPlugin = require('compression-webpack-plugin'); | |||||
const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 压缩js | |||||
const imageWebpackLoader = require('image-webpack-loader');//压缩图片 | |||||
const path = require('path'); | const path = require('path'); | ||||
const resolve = dir => { | const resolve = dir => { | ||||
return path.join(__dirname, dir) | return path.join(__dirname, dir) | ||||
@@ -19,8 +20,8 @@ if (isProduction) { | |||||
'vue': 'Vue', | 'vue': 'Vue', | ||||
'vant': 'vant', | 'vant': 'vant', | ||||
'element-ui': 'ELEMENT', | 'element-ui': 'ELEMENT', | ||||
'vuex': 'Vuex', | |||||
'vue-router': 'VueRouter', | |||||
// 'vuex': 'Vuex', | |||||
// 'vue-router': 'VueRouter', | |||||
} | } | ||||
cdn = { | cdn = { | ||||
css: [ | css: [ | ||||
@@ -28,11 +29,11 @@ if (isProduction) { | |||||
], | ], | ||||
js: [ | js: [ | ||||
// vue must at first! | // vue must at first! | ||||
'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs | |||||
'https://unpkg.com/vant@2.12/lib/vant.min.js', //vant | |||||
'https://unpkg.com/element-ui/lib/index.js', // element-ui js | |||||
'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.0/vuex.global.min.js',//vuex | |||||
'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.global.min.js',//vue-router | |||||
'https://unpkg.com/vue@2.6.11/dist/vue.js', // vuejs | |||||
'https://unpkg.com/vant@2.12.48/lib/vant.min.js', //vant | |||||
'https://unpkg.com/element-ui@2.15.12/lib/index.js', // element-ui js | |||||
// 'https://cdn.bootcdn.net/ajax/libs/vuex/3.4.0/vuex.global.min.js',//vuex | |||||
// 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.global.min.js',//vue-router | |||||
] | ] | ||||
} | } | ||||
} | } | ||||
@@ -104,21 +105,55 @@ module.exports = { | |||||
args[0].favicon = './public/favicon.ico'; | args[0].favicon = './public/favicon.ico'; | ||||
return args; | return args; | ||||
}); | }); | ||||
// 注入cdn变量 (打包时会执行) | // 注入cdn变量 (打包时会执行) | ||||
config.plugin('html').tap(args => { | config.plugin('html').tap(args => { | ||||
args[0].cdn = cdn // 配置cdn给插件 | args[0].cdn = cdn // 配置cdn给插件 | ||||
return args | return args | ||||
}) | }) | ||||
// 压缩js | |||||
config.plugin('compression-webpack-plugin').use(new CompressionWebpackPlugin({ | |||||
test: /\.(js|css|scss)$/, // 匹配文件名 | |||||
threshold: 20480, // 对超过20k的数据压缩 | |||||
minRatio: 0.8, | |||||
deleteOriginalAssets: true // 删除源文件 | |||||
// 图片路径 | |||||
config.module.rule('images') | |||||
.use('url-loader') | |||||
.tap(options => ({ | |||||
name: './assets/images/[name].[ext]', | |||||
quality: 85, | |||||
limit: 0, | |||||
esModule: false, | |||||
})) | })) | ||||
//图片压缩 | |||||
config.module | |||||
.rule('images') | |||||
.use('image-webpack-loader') | |||||
.loader('image-webpack-loader') | |||||
.options({ | |||||
mozjpeg: { | |||||
progressive: true, | |||||
quality: 65 | |||||
}, | |||||
optipng: { | |||||
enabled: false | |||||
}, | |||||
pngquant: { | |||||
quality: [0.65, 0.9], | |||||
speed: 4 | |||||
}, | |||||
gifsicle: { | |||||
interlaced: false | |||||
}, | |||||
webp: { | |||||
quality: 75 | |||||
} | |||||
}) | |||||
.end(); | |||||
// 压缩js,只能线上,本地会js访问错误 | |||||
if (process.env.VUE_APP_ENV != 'development') { | |||||
// config.plugin('compression-webpack-plugin').use(new CompressionWebpackPlugin({ | |||||
// test: /\.(js|css|scss)$/, // 匹配文件名 | |||||
// threshold: 20480, // 对超过20k的数据压缩 | |||||
// minRatio: 0.8, | |||||
// deleteOriginalAssets: true // 删除源文件 | |||||
// })) | |||||
} | |||||
@@ -4292,7 +4292,7 @@ ignore@^5.1.1: | |||||
image-webpack-loader@^8.1.0: | image-webpack-loader@^8.1.0: | ||||
version "8.1.0" | version "8.1.0" | ||||
resolved "https://registry.npmmirror.com/image-webpack-loader/-/image-webpack-loader-8.1.0.tgz" | |||||
resolved "https://registry.npmmirror.com/image-webpack-loader/-/image-webpack-loader-8.1.0.tgz#cd97172e1e7304ef5eb898344fc25bbb650fc7d7" | |||||
integrity sha512-bxzMIBNu42KGo6Bc9YMB0QEUt+XuVTl2ZSX3oGAlbsqYOkxkT4TEWvVsnwUkCRCYISJrMCEc/s0y8OYrmEfUOg== | integrity sha512-bxzMIBNu42KGo6Bc9YMB0QEUt+XuVTl2ZSX3oGAlbsqYOkxkT4TEWvVsnwUkCRCYISJrMCEc/s0y8OYrmEfUOg== | ||||
dependencies: | dependencies: | ||||
imagemin "^7.0.1" | imagemin "^7.0.1" | ||||