how to import file from "src" folder to "public" folder in JavaScript?

Question

I'm trying to create SPA\PWA using Vue Js.

I want to import a file of functions to public folder from src folder.

so i do this:

index.html file in public folder:

in the first time i get this err: Uncaught SyntaxError: Cannot use import statement outside a module then I added type="module" but now i get this err: GET http://localhost:8080/src/scripts/sc.js net::ERR_ABORTED 404 (Not Found)

how can i fix that?

Why do you want to do this in the first place? What problem are you trying to solve this way? — Thomas Junk
– Thomas Junk, Commented Mar 27, 2022 at 17:05
@ThomasJunk In the sc.js file there is a function ```getOS`` that determines the os of the device` I want to use to accept only Android and iOS users to use the site. — Adam
– Adam, Commented Mar 27, 2022 at 17:15
Okay. My bad. I asked imprecise. Why do you want to "import" the package within the context of the index.html in contrast to just import it in your main.js as any other function? What makes you think you have to solve your problem this way and not in another way? Maybe the problems you are facing stem from choosing the wrong approach? — Thomas Junk
– Thomas Junk, Commented Mar 27, 2022 at 17:26
If you want to use imports in your script, you should build a js bundle with webpack/babel or similar. Your frontend code can't known about your source code files tree. — Peterrabbit
– Peterrabbit, Commented Mar 27, 2022 at 17:26
Related SO question: stackoverflow.com/questions/66867833/… — Yogi
– Yogi, Commented Mar 27, 2022 at 17:27

Kannu Mandora · Accepted Answer · 2023-07-18 03:04:09Z

1

Just import your script.js in main.js or which is entry level file you need to import inside it.

answered Jul 18, 2023 at 3:04

Kannu Mandora

6926 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christa · Accepted Answer · 2023-07-18 04:46:36Z

if i understand you want only ios and android view your app you can use an package like vue-mobile-detection or device-detector-js

npm i vue-mobile-detection

Plugin installation

import VueMobileDetection from "vue-mobile-detection";
import App from "./App.vue";

const app = createApp(App);
app.use(VueMobileDetection);

/* After the install you can use this.$isMobile() in all your vue components */

Using the plugin

<template>
  <div id="app">
    <!-- Use in template -->
    <div v-if="$isMobile()">MOBILE</div>
    <div v-else>DESKTOP OR TABLET (Denied Access)</div>
  </div>
</template>

<script>
export default {
  created() {
    // Use in js
    console.log(this.$isMobile());
  }
};
</script>

also you can use route or your own isMobile function please refer to this thread

Display different Vuejs components for mobile browsers

Collectives™ on Stack Overflow

how to import file from "src" folder to "public" folder in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related