I'm trying to convert my app from using the Vue Cli to build to Vite. It's a simple multipage app with 2 endpoints admin and portal my directory structure looks like...
| vite.config.js
| - admin
| index.html
| App.vue
| - portal
| index.html
| App.vue
| index.html
And my vite config looks like...
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
port: 8080
},
build: {
outDir: '../dist',
sourcemap: true,
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
admin: resolve(__dirname, '/admin/index.html'),
portal: resolve(__dirname, '/portal/index.html')
}
}
}
})
Which works well for /admin and /portal endpoints, but I'm wondering if this can handle path params such as /portal/randomstring?
Related
I am using vue3 + vite and a plugin
#originjs/vite-plugin-federation
to build a micro frontend. One app will be the host and one will be the remote, both will have their own routing. Is there a way to navigate remote app inside the host app.
If I export a single component from the remote app it is working, but if I export App.js with routing it is not working, can anybody provide general guidelines to this problem.
vite config of remote:
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import vueJsx from "#vitejs/plugin-vue-jsx";
import federation from "#originjs/vite-plugin-federation";
const dependencies = require("./package.json").dependencies;
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
federation({
name: "remote-app",
filename: "remoteEntry.js",
exposes: {
"./Test": "./src/App.vue",
},
shared: [{ ...dependencies }, "vue", "vue-router"],
}),
],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});
vite.config of host:
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import vueJsx from "#vitejs/plugin-vue-jsx";
import federation from "#originjs/vite-plugin-federation";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
federation({
name: "host-app",
remotes: {
remote: "http://127.0.0.1:5173/dist/assets/remoteEntry.js",
},
shared: ["vue"],
}),
],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});
Hellođź‘‹
I'm trying to build a web app that shows all the countries in the world with their information, upon clicking on a country the user will be redirected to a different page with detailed information of the clicked country.
So the point is when i use the build function to create the production code, the second html(the country page where detailed info is given) file isn't built,
my repo: MY REPOSITORY
this is how my directory is:
root
--vite.config.js
--node_modules
--public
--scss
--package.json
--package-lock.json
--src
----index.html
----App.vue
----main.js
----components (not inportant)
----country
--------country.js
--------country.html
--------AppCountry.vue
this is my vite.config.js file
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import { resolve } from 'node:path'
// https://vitejs.dev/config/
export default defineConfig({
// base: "/countries-api/",
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
},
},
build:{
rollupOptions:{
input:{
main:resolve(__dirname, 'index.html'),
country:resolve(__dirname, 'src/country/country.html')
},
external:[
resolve(__dirname, 'src/country/country.js')
],
},
watch:{
}
}
})
I have an error when I build my project using vite like this:
[vite]: Rollup failed to resolve import "src/main.js" from "resepsionis/index.html".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "src/main.js" from "resepsionis/index.html".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
at onRollupWarning (/var/www/hotel-hebat/node_modules/vite/dist/node/chunks/dep-9c153816.js:39242:19)
at onwarn (/var/www/hotel-hebat/node_modules/vite/dist/node/chunks/dep-9c153816.js:39020:13)
at Object.onwarn (/var/www/hotel-hebat/node_modules/rollup/dist/shared/rollup.js:23129:13)
at ModuleLoader.handleResolveId (/var/www/hotel-hebat/node_modules/rollup/dist/shared/rollup.js:22419:26)
at /var/www/hotel-hebat/node_modules/rollup/dist/shared/rollup.js:22380:26
I want to build a multiple page application, each application has its own task. Here is my vite config:
import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import vueJsx from "#vitejs/plugin-vue-jsx";
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
"#": fileURLToPath(new URL("src", import.meta.url)),
},
},
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
resepsionis: resolve(__dirname, 'resepsionis/index.html')
},
external: [
'vue', resolve(__dirname, 'resepsionis/src/main.js'), /node_modules/
]
}
},
});
and here is my structure folder:
structure folder
So I'm pretty sure this is easy but I'm brand new to Vite and I haven't hit upon the right combination yet. I have all of this working in Vue-Cli 3 but would like to get it working in Vite.
I'm using Vue Router 4.0.0 and Vue 3.2.25 and Vite and Okta as my Oauth provider. I have a sign-in redirect URI in Okta of http://localhost:8080/login/callback. When I initiate my login flow it redirects to http://localhost:8080/login/callback?code=PnrOH4v4_... which resolves to my Home route of "/" and not my LoginCallback route of "/login/callback". I'm pretty sure it's the hash. I've tried various combinations of things but haven't hit the right combination yet.
Here's my router.
import { createRouter, createWebHashHistory } from "vue-router";
import { LoginCallback, navigationGuard } from "#okta/okta-vue";
import Home from "../views/Home.vue";
import User from "../views/User.vue";
import Profile from "#/components/Profile.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/login/callback",
component: LoginCallback,
},
{
path: "/user",
name: "User",
component: User,
meta: {
requiresAuth: true,
},
},
{
path: "/profile",
component: Profile,
meta: {
requiresAuth: true,
},
},
];
console.log("base = " + import.meta.env.BASE_URL);
const router = createRouter({
mode: "history",
history: createWebHashHistory(import.meta.env.BASE_URL),
hash: false,
routes,
});
router.beforeEach(navigationGuard);
export default router;
and here's my vite.config.js
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import path from "path";
export default defineConfig({
base: "http://localhost:8080/",
server: {
port: 3030,
},
preview: {
port: 8080,
},
plugins: [vue()],
resolve: {
alias: [
{ find: "#", replacement: path.resolve(__dirname, "./src") },
{
// I got this from https://github.com/okta/okta-auth-js/issues/641
find: "#okta/okta-auth-js",
replacement: require.resolve(
"#okta/okta-auth-js/dist/okta-auth-js.umd.js"
),
},
{ find: "#config", replacement: path.resolve(__dirname, "./src/config") },
],
},
});
I believe you don't need any more alias for replacing "#okta/okta-auth-js" with "#okta/okta-auth-js/dist/okta-auth-js.umd.js" since this issue was fixed in the newest version of Okta Vue SDK.
Since 5.x version you need to install #okta/okta-auth-js as dependency. Here you can find more information about migration.
I have a Vue2 project with Webpack, and I'm trying to switch from Webpack to Vite.
In webpack.common.js, I have multiple entry points:
module.exports = {
entry: {
appSchool: './resources/school/app.js',
appStudent: './resources/student/app.js',
appAuth: './resources/auth/app.js'
},
...
}
How do I write this in vite.config.js?
Vite uses Rollup under the hood, and you can configure Rollup through build.rollupOptions, and then Rollup's input option:
// vite.config.js
import { fileURLToPath } from 'url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
input: {
appSchoool: fileURLToPath(new URL('./resources/school/index.html', import.meta.url)),
appStudent: fileURLToPath(new URL('./resources/student/index.html', import.meta.url)),
appAuth: fileURLToPath(new URL('./resources/auth/index.html', import.meta.url)),
},
},
},
})
Note the entry points refer to index.html files, which themselves link to the app.js in their corresponding directories (e.g., ./resources/student/index.html contains <script src="./app.js">). The input config also accepts the app.js file directly, but no HTML would be generated.
demo