Gdxdsd 7995 migrate vue cli to vite #507
Conversation
| @@ -4,8 +4,8 @@ | |||
| <meta charset="utf-8"> | |||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |||
| <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||
There was a problem hiding this comment.
Vite does not process <%= %>. We are not using webpack any more and using plain html should work fine.
| "serve": "vue-cli-service serve", | ||
| "build": "vue-cli-service build" |
There was a problem hiding this comment.
Replaced with Vite's equivalents.
| "webpack-dev-server": "^5.2.1" | ||
| "@vitejs/plugin-vue": "^6.0.1", | ||
| "vite": "^7.1.3" | ||
| } |
There was a problem hiding this comment.
Vue CLI uses Webpack + Babel under the hood. Vite, together with @vitejs/plugin-vue , replaces both Webpack and Babel with a modern, faster toolchain.
| "dev": "vite", | ||
| "build": "vite build", | ||
| "preview": "vite preview" |
There was a problem hiding this comment.
- "npm run dev" runs Vite’s dev server, equivalent to the “npm run serve” in Vue CLI. (Default is http://localhost:5173/, but we’ve set the port to 8080 in config)
- “npm run build” creates a production build of the app (same as Vue CLI)
- “npm run preview” runs a local static test server, letting to test the built app before deploying (no built-in equivalent in Vue CLI)
| @@ -4,8 +4,8 @@ | |||
| <meta charset="utf-8"> | |||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |||
| <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||
| <title><%= htmlWebpackPlugin.options.title %></title> | |||
There was a problem hiding this comment.
Vite does not process <%= %>. We are not using webpack any more and using plain html should work fine.
| </head> | ||
| <body> | ||
| <noscript> | ||
| <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | ||
| </noscript> |
There was a problem hiding this comment.
Vite does not process <%= %>. We are not using webpack any more and using plain html should work fine.
| app.config.productionSourceMap = false | ||
| } | ||
|
|
||
| // This is a global After-Hook which calls the Snowplow page tracking event. |
There was a problem hiding this comment.
productionSourceMap doesn’t exist in Vite (it is a webpack option). For Vite, it should be configured in vite.config.js See: examples/vue_js_tracker/vite.config.js
Note: By disabling source maps, browsers only see minified code in production build (no .map file), making it smaller and more secure.
| build: { | ||
| sourcemap: false // disables source maps for production | ||
| } | ||
| }) No newline at end of file |
There was a problem hiding this comment.
By disabling source maps, browsers only see minified code in production build (no .map file), making it smaller and more secure.
| server: { | ||
| port: 8080 | ||
| }, | ||
| build: { |
There was a problem hiding this comment.
The app will run on http://localhost:8080/
This PR is for migrating from Vue CLI to Vite and it does the following:
Please refer to the ticket GDXDSD-7995 for testing instructions.