migrate vue-cli to vite

This commit is contained in:
Alberto Xamin 2023-02-10 16:15:28 +00:00
parent 26869b79e0
commit 2701e682b4
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
11 changed files with 3068 additions and 4793 deletions

View File

@ -1,5 +1,5 @@
# build Vue frontend
FROM node:16-alpine as builder
FROM node:19-alpine as builder
COPY ./frontend .
RUN npm install
RUN npm run build

View File

@ -1,5 +0,0 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

View File

@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="keywords" content="bang, bang online, bang game, bang multiplayer, bang card game, bang card game online, Bang! card game rules online, play Bang! online, bang online with friends, high noon, dodge city, gold rush"/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="icon" href="/favicon.ico">
<meta name="theme-color" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
@ -23,10 +23,11 @@
<meta property="og:url" content="https://bang.xamin.it/" />
<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
<meta property="og:description" content="Wanna play Bang with your friends but you cannot meet in person? Play Bang! the online multiplayer card game. It includes expansion like Gold Rush, Dodge City, Fistful of Cards and High Noon" />
<script type="module" src="/src/main.js"></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>
<strong>We're sorry but to play Bang! you need JavaScript enabqled. Please enable it to play.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->

View File

@ -1,36 +1,32 @@
{
"name": "frontend",
"name": "bang-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
"serve": "vite",
"build": "vite build",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
},
"dependencies": {
"@datadog/browser-rum": "^4.33.0",
"bang-vue-socket.io": "^4.0.0",
"caniuse-lite": "^1.0.30001451",
"core-js": "^3.16.2",
"pretty-checkbox-vue": "^1.1.9",
"register-service-worker": "^1.7.2",
"vue": "^2.6.14",
"vue-clipboard2": "^0.3.3",
"vue-i18n": "^8.28.2",
"vue-json-viewer": "^2.2.22",
"vue-router": "^3.6.5",
"bang-vue-socket.io": "^4.0.0"
"vue-router": "^3.6.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^5.0.8",
"@vue/cli-plugin-eslint": "^5.0.8",
"@vue/cli-plugin-pwa": "^5.0.8",
"@vue/cli-plugin-router": "^5.0.8",
"@vue/cli-service": "^5.0.8",
"babel-eslint": "^10.1.0",
"eslint": "^7.5.0",
"eslint-plugin-vue": "^7.20.0",
"vue-template-compiler": "^2.6.14",
"workbox-webpack-plugin": "^6.5.4"
"eslint": "^8.33.0",
"eslint-plugin-vue": "^9.9.0",
"vite": "^4.1.1",
"vite-plugin-html": "^3.2.0",
"vite-plugin-pwa": "^0.14.3",
"vite-plugin-vue2": "^2.0.3",
"vue-template-compiler": "^2.7.14"
},
"eslintConfig": {
"root": true,
@ -41,9 +37,6 @@
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [

View File

@ -120,7 +120,8 @@
</div>
</template>
<script>
import Card from './Card'
import Card from '@/components/Card.vue'
export default {
name: 'Help',
components: {

View File

@ -39,8 +39,6 @@ const i18n = new VueI18n({
fallbackLocale: fallbackLocale
})
import './registerServiceWorker'
new Vue({
i18n,
router,

View File

@ -1,41 +0,0 @@
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB'
)
},
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('Content has been cached for offline use.')
},
updatefound () {
console.log('New content is downloading.')
},
updated (registration) {
console.log('New content is available; please refresh.')
let confirmationResult = confirm("New version found! Do you want to reload the app?")
if (confirmationResult) registration.waiting.postMessage({action: "skipWaiting"})
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
let refreshing
navigator.serviceWorker.addEventListener("controllerchange", function() {
if (refreshing) return
window.location.reload()
refreshing = true
})
}

View File

@ -27,8 +27,8 @@ const routes = [
]
const router = new VueRouter({
mode: process.env.NODE_ENV === "development" ? 'hash' : 'history',
base: process.env.BASE_URL,
mode: import.meta.env.NODE_ENV === "development" ? 'hash' : 'history',
base: import.meta.env.BASE_URL,
routes
})

View File

@ -1,8 +0,0 @@
self.__precacheManifest = [].concat(self.__precacheManifest || []);
// install new service worker when ok, then reload page.
self.addEventListener("message", msg=>{
if (msg.data.action=='skipWaiting'){
self.skipWaiting()
}
})

26
frontend/vite.config.js Normal file
View File

@ -0,0 +1,26 @@
import { defineConfig } from "vite";
// import vue from '@vitejs/plugin-vue' // vue 3
import { createVuePlugin as vue } from "vite-plugin-vue2"; //vue 2
import { createHtmlPlugin } from 'vite-plugin-html'
import { VitePWA } from 'vite-plugin-pwa'
const path = require("path");
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
VitePWA({ registerType: 'autoUpdate' }),
createHtmlPlugin({
minify: true,
inject: {
data: {}
}
}),
],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});

File diff suppressed because it is too large Load Diff