@@ -30,8 +30,8 @@ yarn config set ignore-engines true | |||||
### node-sass版本6.0.1 | ### node-sass版本6.0.1 | ||||
### 测试环境baseURL = 'https://smapitest.malls.iformall.com/C' | |||||
### 测试环境baseURL = 'https://mtest.metavatar.cc' | |||||
### 正式环境baseURL = 'http://m.metavatar.cc/C' | |||||
### 正式环境baseURL = 'https://m.metavatar.cc' | |||||
项目根目录下配置有模板vue文件“model.vue”,已配置进入动画、回到顶部等功能,可以此为基础添加页面。 | 项目根目录下配置有模板vue文件“model.vue”,已配置进入动画、回到顶部等功能,可以此为基础添加页面。 |
@@ -1,42 +1,42 @@ | |||||
{ | |||||
"name": "Metavatar", | |||||
"version": "0.1.0", | |||||
"private": true, | |||||
"scripts": { | |||||
"dev": "vue-cli-service serve --mode development", | |||||
"build": "vue-cli-service build --mode test", | |||||
"build-test": "vue-cli-service build --mode test", | |||||
"build-prd": "vue-cli-service build --mode production" | |||||
}, | |||||
"dependencies": { | |||||
"axios": "0.18.1", | |||||
"element-ui": "^2.15.12", | |||||
"file-saver": "^2.0.5", | |||||
"franc": "^6.1.0", | |||||
"image-webpack-loader": "^8.1.0", | |||||
"install": "^0.13.0", | |||||
"lib-flexible": "^0.3.2", | |||||
"mic-recorder-to-mp3": "^2.2.2", | |||||
"postcss-px2rem": "^0.3.0", | |||||
"register-service-worker": "^1.7.1", | |||||
"swiper": "^4.5.1", | |||||
"vant": "^2.12.48", | |||||
"vue": "^2.6.11", | |||||
"vue-cropper": "^0.5.11", | |||||
"vue-router": "^3.2.0", | |||||
"vue-waterfall2": "^1.10.6", | |||||
"vuex": "^3.4.0" | |||||
}, | |||||
"devDependencies": { | |||||
"@vue/cli-plugin-pwa": "~4.5.13", | |||||
"@vue/cli-plugin-router": "~4.5.13", | |||||
"@vue/cli-plugin-vuex": "~4.5.13", | |||||
"@vue/cli-service": "~4.5.13", | |||||
"compression-webpack-plugin": "5.0.1", | |||||
"node-sass": "^6.0.1", | |||||
"sass": "^1.60.0", | |||||
"sass-loader": "^7.0.3", | |||||
"uglifyjs-webpack-plugin": "^2.2.0", | |||||
"vue-template-compiler": "^2.6.11" | |||||
} | |||||
} | |||||
{ | |||||
"name": "Metavatar", | |||||
"version": "0.1.0", | |||||
"private": true, | |||||
"scripts": { | |||||
"dev": "vue-cli-service serve --mode development", | |||||
"build": "vue-cli-service build --mode test", | |||||
"build-test": "vue-cli-service build --mode test", | |||||
"build-prd": "vue-cli-service build --mode production" | |||||
}, | |||||
"dependencies": { | |||||
"axios": "0.18.1", | |||||
"element-ui": "^2.15.12", | |||||
"file-saver": "^2.0.5", | |||||
"franc": "^6.1.0", | |||||
"image-webpack-loader": "^8.1.0", | |||||
"install": "^0.13.0", | |||||
"lib-flexible": "^0.3.2", | |||||
"mic-recorder-to-mp3": "^2.2.2", | |||||
"postcss-px2rem": "^0.3.0", | |||||
"register-service-worker": "^1.7.1", | |||||
"swiper": "^4.5.1", | |||||
"vant": "^2.12.48", | |||||
"vue": "^2.6.11", | |||||
"vue-cropper": "^0.5.11", | |||||
"vue-router": "^3.2.0", | |||||
"vue-waterfall2": "^1.10.6", | |||||
"vuex": "^3.4.0" | |||||
}, | |||||
"devDependencies": { | |||||
"@vue/cli-plugin-pwa": "~4.5.13", | |||||
"@vue/cli-plugin-router": "~4.5.13", | |||||
"@vue/cli-plugin-vuex": "~4.5.13", | |||||
"@vue/cli-service": "~4.5.13", | |||||
"compression-webpack-plugin": "5.0.1", | |||||
"node-sass": "^6.0.1", | |||||
"sass": "^1.60.0", | |||||
"sass-loader": "^7.0.3", | |||||
"uglifyjs-webpack-plugin": "^2.2.0", | |||||
"vue-template-compiler": "^2.6.11" | |||||
} | |||||
} |
@@ -13,6 +13,76 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- isVX && videoPlayBtn --> | <!-- isVX && videoPlayBtn --> | ||||
<div class="module_0"> | |||||
<!-- <video id="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="vantLoadingBox" style="height: 550px" v-show="!loading"> | |||||
<van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | |||||
</div> | |||||
<div | |||||
v-if="isVX && videoPlayBtn && !isAndroid" | |||||
@click="playVideo" | |||||
style=" | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
z-index: 999; | |||||
width: 100px; | |||||
height: 100px; | |||||
" | |||||
> | |||||
<img | |||||
src="../../assets/icon/icon-play.png" | |||||
alt="" | |||||
style="width: 100px; height: 100px" | |||||
/> | |||||
</div> | |||||
<video | |||||
@play="videoPlayBtn = false" | |||||
id="video" | |||||
v-if="loading" | |||||
:src="videoUrl" | |||||
ref="vidoe" | |||||
width="100%" | |||||
height="100%" | |||||
autoplay | |||||
muted="muted" | |||||
loop="loop" | |||||
playsinline | |||||
> | |||||
<!-- <source type="audio/ogg" /> --> | |||||
</video> | |||||
<div class="titleBox"> | |||||
<div v-if="characters == 1"> | |||||
<div class="text1">卓越之人</div> | |||||
<div class="text2">由ChatGPT强势驱动</div> | |||||
</div> | |||||
<div v-if="characters != 1"> | |||||
<div class="text1">Powered By ChatGPT.</div> | |||||
<div class="text2">Make it human.</div> | |||||
</div> | |||||
</div> | |||||
<div | |||||
:class="isBtnActice ? 'title_btn active' : 'title_btn'" | |||||
@touchstart="chatTouchStart" | |||||
@click="goToChat" | |||||
@touchend="chatTouchEnd" | |||||
> | |||||
{{ characters == 1 ? "开始聊天" : "Let's Talk" }} | |||||
</div> | |||||
<div class="bottom"> | |||||
<div v-if="characters == 1"> | |||||
Explore our website, or click above to let Metavatar show you around | |||||
</div> | |||||
<div v-if="characters != 1"> | |||||
Explore our website, or click above to let Metavatar show you around | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="module_1"> | <div class="module_1"> | ||||
<!-- <video id="video" ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> --> | <!-- <video id="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" /> --> | <!-- <video ref="vidoe" src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> --> | ||||
@@ -527,6 +597,7 @@ export default { | |||||
return { | return { | ||||
isAndroid: false, //判断是不是ios | isAndroid: false, //判断是不是ios | ||||
inPage: false, | inPage: false, | ||||
isBtnActice: false, | |||||
loading: false, // 加载状态 | loading: false, // 加载状态 | ||||
videoUrl: "", // 视频路径 | videoUrl: "", // 视频路径 | ||||
videoUrl2: "", // 视频路径 | videoUrl2: "", // 视频路径 | ||||
@@ -865,6 +936,22 @@ export default { | |||||
Toast.fail(err.message); | Toast.fail(err.message); | ||||
}); | }); | ||||
}, | }, | ||||
chatTouchStart() { | |||||
console.log("chatTouchStart"); | |||||
this.isBtnActice = true; | |||||
}, | |||||
chatTouchEnd() { | |||||
console.log("chatTouchEnd"); | |||||
this.isBtnActice = false; | |||||
}, | |||||
goToChat() { | |||||
console.log("goToChat"); | |||||
this.isBtnActice = false; | |||||
this.$router.push("/realTimeChat"); | |||||
}, | |||||
}, | }, | ||||
computed: { | computed: { | ||||
...mapState({ | ...mapState({ | ||||
@@ -898,7 +985,6 @@ export default { | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.goView("top"); | this.goView("top"); | ||||
this.$nextTick(() => { | this.$nextTick(() => { | ||||
this.module_6_data = oneList; | this.module_6_data = oneList; | ||||
this.carouselLsit = twoList; | this.carouselLsit = twoList; | ||||
@@ -1136,6 +1222,76 @@ export default { | |||||
height: 70px; | height: 70px; | ||||
width: 100%; | width: 100%; | ||||
} | } | ||||
.module_0 { | |||||
width: 100%; | |||||
background-color: #202020; | |||||
// height: 100vh; | |||||
// height: 640px; | |||||
// background-color: aquamarine; | |||||
// background-image: url("../../assets/img/bg.png"); | |||||
background-repeat: no-repeat; | |||||
background-size: 100% 100%; | |||||
overflow: hidden; | |||||
position: relative; | |||||
border-bottom: 3px solid #c0c0c0; | |||||
.titleBox { | |||||
position: absolute; | |||||
color: #fff; | |||||
left: 50%; | |||||
bottom: 70%; | |||||
transform: translate(-50%, -50%); | |||||
font-size: 20px; | |||||
text-align: center; | |||||
.text1 { | |||||
margin-bottom: 10px; | |||||
} | |||||
.text2 { | |||||
text-align: center; | |||||
} | |||||
} | |||||
.title_btn { | |||||
position: absolute; | |||||
left: 50%; | |||||
bottom: 10%; | |||||
transform: translate(-50%, -50%); | |||||
height: 40px; | |||||
line-height: 35px; | |||||
width: 120px; | |||||
text-align: center; | |||||
color: #16e9d6; | |||||
border-radius: 16px; | |||||
border: #16e9d6 solid 2px; | |||||
font-size: 18px; | |||||
cursor: pointer; | |||||
transition: all 0.1s; | |||||
&.active { | |||||
color: #ffffff; | |||||
background-color: #16e9d6; | |||||
transform: translate(-50%, -50%) scale(0.9); | |||||
} | |||||
} | |||||
.bottom { | |||||
position: absolute; | |||||
color: #fff; | |||||
width: 300px; | |||||
text-align: center; | |||||
left: 50%; | |||||
bottom: 5%; | |||||
transform: translate(-50%, 0); | |||||
font-size: 20px; | |||||
font-size: 12px; | |||||
.text1 { | |||||
margin-bottom: 10px; | |||||
} | |||||
.text2 { | |||||
text-align: center; | |||||
} | |||||
} | |||||
} | |||||
.module_1 { | .module_1 { | ||||
width: 100%; | width: 100%; | ||||
background-color: #202020; | background-color: #202020; | ||||
@@ -121,6 +121,12 @@ const routes = [ | |||||
name: 'downloadVideo', | name: 'downloadVideo', | ||||
component: () => import("../views/model/downloadVideo"), | component: () => import("../views/model/downloadVideo"), | ||||
}, | }, | ||||
// 实时对话 | |||||
{ | |||||
path: '/realTimeChat', | |||||
name: 'realTimeChat', | |||||
component: () => import("../views/realTimeChat/realTimeChat"), | |||||
}, | |||||
] | ] | ||||
const router = new VueRouter({ | const router = new VueRouter({ | ||||
@@ -0,0 +1,298 @@ | |||||
<template> | |||||
<div :class="inPage ? 'page active' : 'page'"> | |||||
<div id="top"></div> | |||||
<top /> | |||||
<video | |||||
@play="videoPlayBtn = false" | |||||
class="videoBox" | |||||
id="video" | |||||
v-if="loading" | |||||
:src="videoUrl" | |||||
ref="video" | |||||
autoplay | |||||
muted="muted" | |||||
loop="loop" | |||||
playsinline | |||||
:style="'width:100%;height:' + screenHeight + 'px;'" | |||||
></video> | |||||
<div class="controlBox" :style="'width:' + screenWidth + 'px;'"> | |||||
<div :class="isExpend ? 'chatBox' : 'chatBox expand'"> | |||||
<div class="item top">聊天记录</div> | |||||
<div | |||||
v-for="item in chatList" | |||||
:class="item.type == 0 ? 'item left' : 'item right'" | |||||
> | |||||
{{ item.type == 0 ? `我:${item.msg}` : `${item.msg}:你` }} | |||||
</div> | |||||
<div v-if="chatList.length > 0" class="item center">已经到底啦</div> | |||||
<div v-if="chatList.length == 0" class="item noMsg">暂无聊天记录哦</div> | |||||
</div> | |||||
<div class="itemBox left" @click="sendMessage"> | |||||
<img src="../../assets/icon/enter.png" alt="" /> | |||||
</div> | |||||
<input | |||||
v-model="inputText" | |||||
class="inputInside" | |||||
type="text" | |||||
placeholder="输入文字聊天" | |||||
/> | |||||
<img | |||||
:class="isExpend ? 'arrow' : 'arrow active'" | |||||
src="../../assets/icon/arrow-down-bold.png" | |||||
@click="expendChatBox" | |||||
/> | |||||
<div class="itemBox right" @click="setVoice"> | |||||
<img v-if="!isVoiceClose" src="../../assets/icon/voice.png" alt="" /> | |||||
<img | |||||
v-if="isVoiceClose" | |||||
src="../../assets/icon/voice_close.png" | |||||
alt="" | |||||
/> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
// 组件 | |||||
import Vue from "vue"; | |||||
import { Toast } from "vant"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import top from "../../components/common/top"; | |||||
// 工具 | |||||
import { scrollToID } from "../../utils"; | |||||
// import io from "socket.io"; | |||||
Vue.use(Toast); | |||||
export default { | |||||
components: { | |||||
top, | |||||
}, | |||||
data() { | |||||
return { | |||||
inPage: false, | |||||
videoUrl: "", | |||||
videoPlayBtn: true, | |||||
loading: false, // 加载状态 | |||||
isVoiceClose: false, | |||||
isExpend: false, // 对话框展开状态 | |||||
inputText: "", | |||||
screenWidth: document.documentElement.clientWidth, | |||||
screenHeight: document.documentElement.clientHeight, | |||||
socket: null, | |||||
chatList: [ | |||||
{ | |||||
type: 0, | |||||
msg: "你好!", | |||||
}, | |||||
{ | |||||
type: 1, | |||||
msg: "你好!", | |||||
}, | |||||
{ | |||||
type: 0, | |||||
msg: "你好!", | |||||
}, | |||||
{ | |||||
type: 1, | |||||
msg: "你好!", | |||||
}, | |||||
], | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
characters: (state) => state.publicObj.characters, | |||||
}), | |||||
}, | |||||
methods: { | |||||
...mapActions(["setCharacters"]), | |||||
go(url) { | |||||
this.$router.push(url); | |||||
}, | |||||
setVoice() { | |||||
this.isVoiceClose = !this.isVoiceClose; | |||||
Toast.success(this.isVoiceClose ? "麦克风已关闭" : "麦克风已开启"); | |||||
}, | |||||
sendMessage() {}, | |||||
expendChatBox() { | |||||
this.isExpend = !this.isExpend; | |||||
}, | |||||
socketOnLink() { | |||||
// const url = "wss://mtest.metavatar.cc/webrtc"; | |||||
const url = document.location.host; | |||||
this.socket = new WebSocket("wss://" + url + "/webrtc"); | |||||
this.socket.onopen = (success) => { | |||||
console.log(success, "连接成功!"); | |||||
}; | |||||
this.socket.onclose = (evt) => { | |||||
console.log(evt, "连接已断开!"); | |||||
}; | |||||
this.socket.onerror = (evt) => { | |||||
console.log(evt, "连接失败"); | |||||
}; | |||||
this.socket.onmessage = (e) => { | |||||
console.log(e, "e"); | |||||
}; | |||||
}, | |||||
socketLogin() { | |||||
let req = new Object(); | |||||
req.cmd = "CMD_USER_LOGIN"; | |||||
req.username = "Passager"; | |||||
req.password = "123456"; | |||||
req.agent = "browser"; | |||||
let str = JSON.stringify(req); | |||||
this.socket.send(str); | |||||
}, | |||||
}, | |||||
created() {}, | |||||
mounted() { | |||||
this.inPage = true; | |||||
scrollToID("top"); | |||||
this.videoUrl = | |||||
"https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4"; | |||||
this.loading = true; | |||||
this.socketOnLink(); | |||||
}, | |||||
}; | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.page { | |||||
position: relative; | |||||
transform: translateX(30%); | |||||
opacity: 0; | |||||
transition: all 0.5s; // global-transition | |||||
&.active { | |||||
opacity: 1; | |||||
transform: translateX(0); | |||||
} | |||||
.videoBox { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
z-index: -1; | |||||
object-fit: fill; | |||||
} | |||||
.controlBox { | |||||
position: absolute; | |||||
bottom: -670px; | |||||
height: 300px; | |||||
.chatBox { | |||||
position: relative; | |||||
width: 100%; | |||||
height: 160px; | |||||
color: #ffffff; | |||||
padding: 15px 30px 15px 30px; | |||||
overflow: scroll; | |||||
background-color: #00000054; | |||||
opacity: 1; | |||||
transition: all 0.3s; | |||||
.item { | |||||
margin-bottom: 8px; | |||||
&.top { | |||||
position: sticky; | |||||
top: 0px; | |||||
text-align: center; | |||||
} | |||||
&.left { | |||||
text-align: left; | |||||
} | |||||
&.right { | |||||
text-align: right; | |||||
} | |||||
&.center { | |||||
text-align: center; | |||||
margin-top: 40px; | |||||
} | |||||
&.noMsg { | |||||
position: absolute; | |||||
left: 50%; | |||||
bottom: 0; | |||||
transform: translateX(-50%); | |||||
text-align: center; | |||||
} | |||||
} | |||||
&.expand { | |||||
transform: translateY(100px); | |||||
opacity: 0; | |||||
z-index: -1; | |||||
} | |||||
} | |||||
.itemBox { | |||||
position: absolute; | |||||
bottom: 50px; | |||||
width: 50px; | |||||
height: 50px; | |||||
border: 3.5px solid #ffffff; | |||||
border-radius: 50%; | |||||
text-align: center; | |||||
padding: 10px; | |||||
transition: all 0.3s; | |||||
cursor: pointer; | |||||
&.left { | |||||
left: 295px; | |||||
} | |||||
&.right { | |||||
right: 295px; | |||||
} | |||||
img { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
&.active { | |||||
opacity: 0.8; | |||||
} | |||||
} | |||||
.arrow { | |||||
position: absolute; | |||||
bottom: 100px; | |||||
left: 50%; | |||||
transform: translateX(-50%); | |||||
width: 30px; | |||||
height: 30px; | |||||
transition: all 0.2s; | |||||
&.active { | |||||
transform: translateX(-50%) rotate(180deg); | |||||
} | |||||
} | |||||
.inputInside { | |||||
position: absolute; | |||||
bottom: 57px; | |||||
left: 50%; | |||||
transform: translateX(-50%); | |||||
width: 170px; | |||||
height: 35px; | |||||
border: 3.5px solid #ffffff; | |||||
border-radius: 7px; | |||||
padding-left: 10px; | |||||
color: #ffffff; | |||||
caret-color: #ffffff; | |||||
&::-webkit-input-placeholder { | |||||
color: #ffffffbb; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -45,11 +45,11 @@ module.exports = { | |||||
filename: `js/js[name].${timeStamp}.js`, | filename: `js/js[name].${timeStamp}.js`, | ||||
chunkFilename: `js/chunk.[id].${timeStamp}.js`, | chunkFilename: `js/chunk.[id].${timeStamp}.js`, | ||||
}, | }, | ||||
resolve: { | |||||
alias: { | |||||
'@': path.resolve(__dirname, 'src') | |||||
} | |||||
}, | |||||
resolve: { | |||||
alias: { | |||||
'@': path.resolve(__dirname, 'src') | |||||
} | |||||
}, | |||||
externals, | externals, | ||||
}, | }, | ||||
css: { | css: { | ||||
@@ -57,70 +57,70 @@ module.exports = { | |||||
filename: `css/[name].${timeStamp}.css`, | filename: `css/[name].${timeStamp}.css`, | ||||
chunkFilename: `css/chunk.[id].${timeStamp}.css`, | chunkFilename: `css/chunk.[id].${timeStamp}.css`, | ||||
}, | }, | ||||
loaderOptions: { | |||||
css: { | |||||
}, | |||||
// postcss: { | |||||
// // options here will be passed to postcss-loader | |||||
// plugins: [require('postcss-px2rem')({ | |||||
// remUnit: 75 | |||||
// })] | |||||
// } | |||||
} | |||||
}, | |||||
loaderOptions: { | |||||
css: { | |||||
}, | |||||
// postcss: { | |||||
// // options here will be passed to postcss-loader | |||||
// plugins: [require('postcss-px2rem')({ | |||||
// remUnit: 75 | |||||
// })] | |||||
// } | |||||
} | |||||
}, | |||||
pwa: { | |||||
iconPaths: { | |||||
favicon32: 'favicon.ico', | |||||
favicon16: 'favicon.ico', | |||||
appleTouchIcon: 'favicon.ico', | |||||
maskIcon: 'favicon.ico', | |||||
msTileImage: 'favicon.ico' | |||||
} | |||||
pwa: { | |||||
iconPaths: { | |||||
favicon32: 'favicon.ico', | |||||
favicon16: 'favicon.ico', | |||||
appleTouchIcon: 'favicon.ico', | |||||
maskIcon: 'favicon.ico', | |||||
msTileImage: 'favicon.ico' | |||||
} | |||||
}, | |||||
//http://www.metavatar.cc/ | |||||
devServer: { | |||||
overlay: { | |||||
warnings: false, | |||||
errors: false | |||||
}, | }, | ||||
//http://www.metavatar.cc/ | |||||
devServer: { | |||||
overlay: { | |||||
warnings: false, | |||||
errors: false | |||||
proxy: { | |||||
'/api': { | |||||
// target: 'https://smapitestmalls,iformall.com/C/api', | |||||
target: process.env.VUE_APP_API_ROOT + '/api', | |||||
changeOrigin: true, | |||||
pathRewrite: { | |||||
'^/api': '' | |||||
}, | }, | ||||
proxy: { | |||||
'/api': { | |||||
// target: 'https://smapitestmalls,iformall.com/C/api', | |||||
target: process.env.VUE_APP_API_ROOT+'/api', | |||||
changeOrigin: true, | |||||
pathRewrite: { | |||||
'^/api': '' | |||||
}, | |||||
}, | |||||
}, | |||||
} | |||||
}, | |||||
lintOnSave: false, | |||||
publicPath: './', // 打包后引用的资源路径 | |||||
} | |||||
}, | |||||
lintOnSave: false, | |||||
publicPath: './', // 打包后引用的资源路径 | |||||
chainWebpack: config => { | chainWebpack: config => { | ||||
// favicon图标 | |||||
config.plugin('html').tap(args => { | |||||
args[0].favicon = './public/favicon.ico'; | |||||
return args; | |||||
}); | |||||
// 注入cdn变量 (打包时会执行) | |||||
config.plugin('html').tap(args => { | |||||
args[0].cdn = cdn // 配置cdn给插件 | |||||
return args | |||||
}) | |||||
// 图片路径 | |||||
config.module.rule('images') | |||||
// favicon图标 | |||||
config.plugin('html').tap(args => { | |||||
args[0].favicon = './public/favicon.ico'; | |||||
return args; | |||||
}); | |||||
// 注入cdn变量 (打包时会执行) | |||||
config.plugin('html').tap(args => { | |||||
args[0].cdn = cdn // 配置cdn给插件 | |||||
return args | |||||
}) | |||||
// 图片路径 | |||||
config.module.rule('images') | |||||
.use('url-loader') | .use('url-loader') | ||||
.tap(options => ({ | .tap(options => ({ | ||||
name: './assets/images/[name].[ext]', | |||||
quality: 85, | |||||
limit: 0, | |||||
esModule: false, | |||||
name: './assets/images/[name].[ext]', | |||||
quality: 85, | |||||
limit: 0, | |||||
esModule: false, | |||||
})) | })) | ||||
//图片压缩 | |||||
config.module | |||||
//图片压缩 | |||||
config.module | |||||
.rule('images') | .rule('images') | ||||
.use('image-webpack-loader') | .use('image-webpack-loader') | ||||
.loader('image-webpack-loader') | .loader('image-webpack-loader') | ||||
@@ -144,9 +144,9 @@ module.exports = { | |||||
} | } | ||||
}) | }) | ||||
.end(); | .end(); | ||||
// 压缩js,只能线上,本地会js访问错误,会将js压缩成.gz文件 | // 压缩js,只能线上,本地会js访问错误,会将js压缩成.gz文件 | ||||
if (process.env.VUE_APP_ENV != 'development') { | |||||
if (process.env.VUE_APP_ENV != 'development') { | |||||
config.plugin('compression-webpack-plugin').use(new CompressionWebpackPlugin({ | config.plugin('compression-webpack-plugin').use(new CompressionWebpackPlugin({ | ||||
test: /\.(js|css|scss|woff|woff2|ttf)$/, // 匹配文件名 | test: /\.(js|css|scss|woff|woff2|ttf)$/, // 匹配文件名 | ||||
threshold: 20480, // 对超过20k的数据压缩 | threshold: 20480, // 对超过20k的数据压缩 | ||||
@@ -164,19 +164,19 @@ module.exports = { | |||||
} | } | ||||
} | |||||
// configureWebpack: { | |||||
// plugins: [ | |||||
// //打包环境去掉console.log | |||||
// new UglifyJsPlugin({ | |||||
// uglifyOptions: { | |||||
// compress: { | |||||
// drop_console: true, //注释console | |||||
// drop_debugger: true, //注释debugger | |||||
// pure_funcs: ['console.log'], //移除console.log | |||||
// }, | |||||
// }, | |||||
// }), | |||||
// ], | |||||
// } | |||||
} | |||||
// configureWebpack: { | |||||
// plugins: [ | |||||
// //打包环境去掉console.log | |||||
// new UglifyJsPlugin({ | |||||
// uglifyOptions: { | |||||
// compress: { | |||||
// drop_console: true, //注释console | |||||
// drop_debugger: true, //注释debugger | |||||
// pure_funcs: ['console.log'], //移除console.log | |||||
// }, | |||||
// }, | |||||
// }), | |||||
// ], | |||||
// } | |||||
} | } |