refactor: fuck vite defineConfig

This commit is contained in:
zyronon 2024-05-02 01:08:33 +08:00
parent 7f1e157dab
commit d052f60953
4 changed files with 31 additions and 248 deletions

25
.dockerignore Normal file
View File

@ -0,0 +1,25 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
.DS_Store
coverage
*.local
dist
node_modules
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
docs
node

View File

@ -1,16 +1,17 @@
# syntax = docker/dockerfile:experimental
FROM --platform=${BUILDPLATFORM:-linux/amd64,linux/arm64} node:18-buster AS builder
FROM --platform=${BUILDPLATFORM:-linux/amd64,linux/arm64} node:20-buster AS builder
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
WORKDIR /app
COPY . .
WORKDIR /src
COPY ./ ./
# RUN两次方便观察install和build, 也可以用pnpm cache and locked
RUN pnpm install && pnpm run build
RUN pnpm install
RUN npm run build
FROM --platform=${BUILDPLATFORM:-linux/amd64,linux/arm64} ghcr.io/rookie-luochao/nginx-runner:latest
COPY --from=builder /app/dist .
COPY --from=builder /src/dist /app

View File

@ -1,183 +0,0 @@
<template>
<router-view v-slot="{ Component }">
<transition :name="transitionName">
<keep-alive :exclude="store.excludeRoutes">
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
<BaseMask v-if="!isMobile" @click="isMobile = true" />
<div v-if="!isMobile" class="guide">
<Icon class="danger" icon="mynaui:danger-triangle" />
<Icon class="close" icon="simple-line-icons:close" @click="isMobile = true" />
<div class="txt">
<h2>切换至手机模式获取最佳体验</h2>
<h3>1. F12 调出控制台</h3>
<h3>2. Ctrl+Shift+M或点击下面图标</h3>
</div>
<img src="@/assets/img/guide.png" alt="" />
</div>
<Call />
</template>
<script setup lang="ts">
/*
* try {navigator.control.gesture(false);} catch (e) {} //UC
try {navigator.control.longpressMenu(false);} catch (e) {} //
* */
import routes from './router/routes'
import Call from './components/Call.vue'
import { useBaseStore } from '@/store/pinia.js'
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import BaseMask from '@/components/BaseMask.vue'
import { BASE_URL } from '@/config'
const store = useBaseStore()
const route = useRoute()
const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent))
const transitionName = ref('go')
// watch $route 使
watch(
() => route.path,
(to, from) => {
store.setMaskDialog({ state: false, mode: store.maskDialogMode })
//tab
let noAnimation = [
'/',
'/home',
'/slide',
'/me',
'/shop',
'/message',
'/publish',
'/home/live',
'slide',
'/test'
]
if (noAnimation.indexOf(from) !== -1 && noAnimation.indexOf(to) !== -1) {
return (transitionName.value = '')
}
const toDepth = routes.findIndex((v: RouteRecordRaw) => v.path === to)
const fromDepth = routes.findIndex((v: RouteRecordRaw) => v.path === from)
transitionName.value = toDepth > fromDepth ? 'go' : 'back'
}
)
function setVh() {
let vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`)
}
onMounted(() => {
store.init()
setVh()
// resize 1vh
window.addEventListener('resize', () => {
location.href = BASE_URL + '/'
setVh()
})
//
document.onselectstart = new Function('return false') as any
})
</script>
<style lang="less">
@import './assets/less/index';
#app {
height: 100%;
width: 100%;
position: relative;
font-size: 14rem;
}
@media screen and (min-width: 500px) {
#app {
width: 500px !important;
position: relative;
left: 50%;
transform: translateX(-50%);
}
}
.guide {
color: white;
z-index: 999;
background: var(--active-main-bg);
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 16rem;
overflow: hidden;
text-align: center;
.danger {
margin-top: 10rem;
font-size: 40rem;
color: red;
}
.close {
cursor: pointer;
font-size: 18rem;
color: white;
position: absolute;
right: 15rem;
top: 15rem;
}
.txt {
text-align: left;
padding: 0 24rem;
}
img {
display: block;
width: 350rem;
}
}
.go-enter-from {
transform: translate3d(100%, 0, 0);
}
//
.back-enter-to,
.back-enter-from,
.go-enter-to,
.go-leave-from {
transform: translate3d(0, 0, 0);
}
.go-leave-to {
transform: translate3d(-100%, 0, 0);
}
.go-enter-active,
.go-leave-active,
.back-enter-active,
.back-leave-active {
transition: all 0.3s;
}
.back-enter-from {
transform: translate3d(-100%, 0, 0);
}
.back-leave-to {
transform: translate3d(100%, 0, 0);
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

View File

@ -1,60 +0,0 @@
import { createApp } from 'vue'
import App from './App.vue'
import './assets/less/index.less'
import { startMock } from '@/mock'
import router from './router'
import mixin from './utils/mixin'
import VueLazyload from '@jambonn/vue-lazyload'
import { createPinia } from 'pinia'
import { useClick } from '@/utils/hooks/useClick'
import bus, { EVENT_KEY } from '@/utils/bus'
window.isMoved = false
window.isMuted = true
window.showMutedNotice = true
HTMLElement.prototype.addEventListener = new Proxy(HTMLElement.prototype.addEventListener, {
apply(target, ctx, args) {
const eventName = args[0]
const listener = args[1]
if (listener instanceof Function && eventName === 'click') {
args[1] = new Proxy(listener, {
apply(target1, ctx1, args1) {
// console.log('e', args1)
// console.log('click点击', window.isMoved)
if (window.isMoved) return
try {
return target1.apply(ctx1, args1)
} catch (e) {
console.error(`[proxyPlayerEvent][${eventName}]`, listener, e)
}
}
})
}
return target.apply(ctx, args)
}
})
const vClick = useClick()
const pinia = createPinia()
const app = createApp(App)
app.mixin(mixin)
const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url).href
app.use(VueLazyload, {
preLoad: 1.3,
loading: loadImage,
attempt: 1
})
app.use(pinia)
app.use(router)
app.mount('#app')
app.directive('click', vClick)
//放到最后才可以使用pinia
startMock()
setTimeout(() => {
bus.emit(EVENT_KEY.HIDE_MUTED_NOTICE)
window.showMutedNotice = false
}, 2000)
bus.on(EVENT_KEY.REMOVE_MUTED, () => {
window.isMuted = false
})