How can I import a JS file from a folder in my Vue JS project?

Question

I have been trying for days to figure out how to add additional JS files to my Vue Application on my App.vue file. For example, any script which is on a seperate file within my scripts folder. So let's say I want to add a JS file called winelist.js. Can this be done?

<template>
  <div id="app">

    <LoadingScreen :isLoading="isLoading" />
    <div v-if="!isLoading">
      <router-view/>
    </div>

    <PrimaryAppNav/>

  </div>
</template>


<script>

import PrimaryAppNav from './components/PrimaryAppNav.vue'
import LoadingScreen from "./components/LoadingScreen";

export default {
  name: 'app',
  components: {
    PrimaryAppNav,
    LoadingScreen
  },
  data() {
    return { isLoading: true };
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false;
    }, 3000);
  }
}
</script>

<style lang="scss">
    @import 'scss/bootstrap.css';
    @import 'scss/mixins.scss';
    @import 'scss/helpers.scss';
    @import 'scss/main.scss';
</style>

Answer 1

Yes it can be done. Simply do:

import 'path/to/winelist';

in the script section of your vue file

Answer 2

使用@前缀指向根文件夹，然后您可以到任何地方。

import '@/path/to/you/file'