build: move from Vue CLI to Vite

Author: mrholek

.prettierrc.js

@@ -1,5 +1,4 @@
 module.exports = {
-  // jsxBracketSameLine: true,
   semi: false,
   trailingComma: "all",
   singleQuote: true,

babel.config.js

@@ -44,7 +44,8 @@
     <noscript>
       <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-      <div id="app"></div>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>

cypress.json

@@ -12,11 +12,9 @@
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "serve": "vue-cli-service serve",
-    "test:e2e": "vue-cli-service test:e2e",
-    "test:unit": "vue-cli-service test:unit"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@coreui/chartjs": "^3.1.2",
@@ -26,32 +24,13 @@
     "@coreui/utils": "^2.0.2",
     "@coreui/vue": "^4.9.0-beta.1",
     "@coreui/vue-chartjs": "2.1.0",
-    "core-js": "^3.31.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/eslint-parser": "^7.22.5",
-    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-e2e-cypress": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-plugin-router": "~5.0.8",
-    "@vue/cli-plugin-unit-jest": "~5.0.8",
-    "@vue/cli-plugin-vuex": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
-    "@vue/test-utils": "^2.3.2",
-    "@vue/vue3-jest": "^29.2.4",
-    "babel-jest": "^29.5.0",
-    "cypress": "^12.14.0",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.14.1",
-    "jest": "^29.5.0",
-    "prettier": "^2.8.8",
-    "sass": "^1.63.3",
-    "sass-loader": "^13.3.2"
+    "@vitejs/plugin-vue": "^4.2.3",
+    "sass": "^1.68.0",
+    "vite": "^4.4.5"
   }
 }

public/index.html index.html

@@ -15,7 +15,7 @@ export default {
 
     onBeforeMount(() => {
       const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-      const theme = urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
+      const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
       if (theme) {
         setColorMode(theme)
         return

jest.config.js

@@ -0,0 +1,50 @@
+import { defineConfig, loadEnv } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'node:path'
+
+export default defineConfig(({ mode }) => {
+  // Load .env
+  const env = loadEnv(mode, process.cwd(), '')
+  process.env = { ...process.env, ...env }
+
+  return {
+    plugins: [vue()],
+    resolve: {
+      alias: [
+        // webpack path resolve to vitejs
+        {
+          find: /^~(.*)$/,
+          replacement: '$1',
+        },
+        {
+          find: '@/',
+          replacement: `${path.resolve(__dirname, 'src')}/`,
+        },
+        {
+          find: '@',
+          replacement: path.resolve(__dirname, '/src'),
+        },
+      ],
+      extensions: [
+        '.mjs',
+        '.js',
+        '.ts',
+        '.jsx',
+        '.tsx',
+        '.json',
+        '.vue',
+        '.scss',
+      ],
+    },
+    server: {
+      port: 3000,
+      proxy: {
+        // https://vitejs.dev/config/server-options.html
+      },
+    },
+    define: {
+      // vitejs does not support process.env so we have to redefine it
+      'process.env': process.env,
+    },
+  }
+})