Vue-cli 5 enables the publication of a standalone JavaScript file that can be easily integrated and loaded onto

I am currently in the process of developing an application using Vue 2 and webpack. In my current setup, I am only publishing a '.js' file to a remote directory, which is then loaded from a Sharepoint page. Now, I am attempting to transition to Vue 3, but I am facing challenges with publishing just the js file and loading it from a Sharepoint page.

Here is my old webpack configuration for Vue 2:

var path = require('path')
var webpack = require('webpack')

// Rest of the webpack config goes here...

Below is a fragment from my package.json file for Vue 2:

"scripts": {
    // Dev and build scripts defined here
}

And now, here is my vue.config.js configuration for Vue 3:

const { defineConfig } = require('@vue/cli-service')

// Vue 3 webpack configuration goes here...

Lastly, here is my package.json file for Vue 3:

"scripts": {
    // Build, dev, and serve commands defined here
}

If anyone has any insights or solutions to my migration issues, your help would be greatly appreciated. Thank you in advance!

Answer №1

At last, I've discovered my mistake. During deployment, two files were created due to me using lazy loading for a component in my router. It was a simple oversight on my end. Huge thanks to IVO GELOV for their helpful comments!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

tips for concealing the shadow of a draggable div during the dragging process

I am facing an issue with a draggable div. When I drag the div, the shadow also moves along with it. I want to find a way to hide this shadow while dragging. <div draggable="true" (dragstart)="mousedown($event)" (drag)="dra ...

Matching the characters '/#' in a href can be achieved by using regular expressions

I am using the following code to check if the href attribute starts with # and based on that add a class: $('.navbar-nav a').each(function(index, element) { if($(element).attr("href").match("^#")) { //Add class to internal links ...

Troubleshooting alignment problems with a responsive gallery (Bootstrap-gallery & justifyGallery)

Looking to showcase a gallery of images using jquery-justifyGallery and bootstrap-gallery. Want to display 4 images in a row, but running into issues when trying to display 5 images where the last image in the row ends up with a larger width. Bootstrap has ...

Developing Webpart Postback logic in C# script

I am currently facing challenges with SharePoint webparts programming. I am unsure about how to trigger a postback for an object at a specific time. I have come across suggestions to use "javascript" for this purpose, but I am having trouble understanding ...

interaction & portal

I am currently managing a website that includes an iframe. Both the main site and the embedded site within the iframe are verifying the $_SESSION["login"]. Therefore, if the session expires, the user will be automatically logged out. The issue I'm fa ...

Display the number of user connections using Socket.io

I have a simple socket.io application where I can track when users connect and disconnect from my site. However, the issue is that only the first user who connects can see all current connected users, while subsequent users can only see users who join afte ...

Transforming aggregate array of objects into document keys

I have a set of trade data that looks like the following { "_id" : 1498290900.0, "trade" : { "type" : "Adjust", "data" : { "type" : "bid", "rate" : "0.00658714", "amount" : "3.82354427" } ...

How do you add dynamic content to modals in AngularJS and Angular Strap based on the button that was clicked?

Is there a way to make the buttons in the AngularJS + AngularStrap modal more dynamic? Currently, they display static content, but I would like them to show the content of the first column (first name) of the exact row where the button was clicked. What is ...

Is there a way to determine the items that will be displayed on this page by clicking a link from a different page?

First Page: Whenever a link is clicked, it will redirect to the second page where only the relevant item will be displayed <ul class="portfolio-filters list-inline"> <li ><a href="page2.html/#webdesign-filter">Web ...

The initialized Javascript array solely consists of undefined elements, without any of the expected values

I was under the impression that I knew how to declare JavaScript arrays, but in this particular script, I seem to be stuck in an infinite loop of undefined elements within the array. In my code, I define three arrays containing numbers—two with multiple ...

What is the most effective way to eliminate asynchronicity in a function?

Imagine having this block of code: const myFunction = async => { const result = await foobar() } const foobar = async () => { const result = {} result.foo = await foo() result.bar = await bar() return result } Now, let's transform i ...

This function is designed to only work under specific conditions

Looking for assistance with a function that takes an item ID as input and changes its border when pressed. The goal is to increase the border width by 2px when there is no border, and remove the border completely when pressed again. Currently, only the f ...

Encountering an error where "null is not an object" while trying to access 'u.default.setString' in React-Native Clipboard

Query As I execute the code sample on snack.expo.io, an error crops up: null is not an object (evaluating 'u.default.setString') Context The following is my code snippet directly sourced from the example available on GitHub: App.js: import R ...

"Vue: The persistent issue of props returning as undefined continues to trouble developers

While checking my Root and child component (Topbar), I keep finding that the foo prop is undefined in each one. It's perplexing because I have defined it properly. app.js window.Vue = require('vue'); Vue.component('Topbar', ...

Vue.js Card displayDisplaying cards in a Vue

I've recently started diving into vue.js and I'm honing my skills with vuetify. I've been grappling with this layout for quite some time now but I seem to be stuck. Could someone please guide me through approaching this problem? I have an a ...

Implementing flash messages with a delay in an express 4 application

I am currently using Passport.js with a local strategy to authenticate users on my web application. However, I have noticed a delay in setting the flash message. I have tried using the {message: ''} option in Passport and manually setting the fla ...

Is it possible to create 3D maps using a combination of Three.js and leaflet

Creating 3D maps with Leaflet can be quite the challenge, but I'm determined to make it happen. My goal is to display buildings in a three-dimensional perspective using Leaflet as my foundation. I've dabbled with OSM Buildings, but they fell sho ...

Unable to minimize or hide the ace editor widget with Cypress

Today marks the beginning of my journey into posting on this platform, and I am eager to get it right. In my current project using Cypress for writing integration tests, I encountered a challenge while attempting to click on an Ace editor widget within a ...

Is there a solution for the issue of a background image loading full-size before being resized in Javascript?

I am currently working on a project where an image is dynamically resized to fit the window using javascript. However, there is an issue where the full-size image is loaded before resizing it, causing a noticeable jump from full-size to resized version. Is ...

Tips for transmitting looped information from an HTML document to a PHP file using AJAX

Looking for guidance on how to pass looping data from an HTML page to a PHP page using AJAX. Struggling to find a solution to send looping data into the PHP page. The code for the order.html page is shown below: <html> <body> <script lang ...