A more efficient way to have Vue import files from the assets folder rather than manually inserting script tags into the index.html file

Question

A more efficient way to have Vue import files from the assets folder rather than manually inserting script tags into the index.html file

I have a simple structure and would like to utilize assets from cdnjs.com in my project.

The issue arises when I try to import these assets from src/assets/lib instead of directly from the CDN. For example, importing jQuery like this:

Main.js:

import './assets/lib/jquery.min.js'

This causes my application to stop functioning correctly, with an error stating that jQuery is not defined. However, when I import the assets directly in index.html, everything works fine:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>

Error stack details:

Uncaught ReferenceError: jQuery is not defined
    at eval (amalia.js.min.js?c1e6:27)
    at Object../src/assets/amalia/build/js/amalia.js.min.js (app.js:1362)
    at __webpack_require__ (app.js:849)
    ... (additional error details follow)

I want to keep these assets within the src/assets folder for future SFC imports in other projects.

I attempted setting window.jQuery but it doesn't seem like the optimal solution, so any assistance from you guys would be greatly appreciated :)

javascript vue.js import cdn vue-cli

Answer 1

Answer №1

After a lengthy battle lasting 2 hours, I finally uncovered the solution:

npm install jquery --save

// vue.config.js

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
  },
}

Answer 2

After a lengthy battle lasting 2 hours, I finally uncovered the solution:

npm install jquery --save

// vue.config.js

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
  },
}

A more efficient way to have Vue import files from the assets folder rather than manually inserting script tags into the index.html file

Answer №1

Similar questions

Encountering an issue in Next.js when using getStaticProps: reading 'map' of undefined properties

Exploring the capabilities of Jasmine 2.0 by testing an AngularJS factory method that returns a promise

Exploring Angular 2: Unveiling the secrets of lifecycle hooks in lazy loaded

Ajax - Retrieving data from a different webpage

Is there a way to invoke a different function within a class from a callback function in an HTTP request?

Siblings are equipped with the advanced selector feature to

Bringing PlayCanvas WebGL framework into a React environment

Utilizing Core-TransitionEnd in Polymer: A Beginner's Guide

Is there a way to allow an HTML page rendered by node.js to communicate back to its corresponding node.js file?

Is there a way to trigger $q notify without initiating a $digest cycle?

Rotate image in Vue3 using @click

Adjusting the size of content tags depending on their popularity

What is the significance of incorporating vinyl-source-stream into gulp in my workflow?

Utilize Jquery to insert the text into the input or textarea field

Enhance your website's performance by optimizing Javascript page loading time when using

Customize your Shopify Messenger icon using JavaScript!

Executing Selenium tests: utilizing the webdriver.wait function to repeatedly call a promise

Ensuring Continuous User Authentication with Vuex

NodeJS Express Application Error: Unable to access /url

Exploring ways to retrieve item metadata from a Stripe checkout session