Loading an external Javascript file in Vue.js

Question

How can I include and initialize a javascript file mymain.min.jsthat is in my assets folder within my project using VueJs with webpack?

Webpack.base.conf

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'sauJs': path.resolve(__dirname, '../src/assets/mymain.min.js'),
    }
  },

I have also tried adding <script src="src/assets/mymain.min.js"></script> to my index.html page however I get Cannot GET /src/assets/mymain.min.js

Answer 1

You are misunderstand what resolve actually does. This is not where you put the Javascript code that would actually bundle together.

When you specify a resolve alias like so:

'@': resolve('src'),

It will make sure that when you use:

require('@/test')

It will get resolved to:

require('src/test')

This is helpful to prevent relatives paths all over the place and you can also alias paths that are longer to prevent retyping them all the type.

Your webpack file should have an entry property that specifies your main uncompiled javascript file.

module.exports = {
    entry: './example/main.js',
}

In your main.js file you can import the javascript file that you want to include in your bundle.

main.js

import Vue from 'vue';
// Or:
const vue = require('vue')
// Or(.js extension can be omitted):
import MyFile from './src/MyFile.js'

The other approach is to specify another entry property, something I have not done personally.

This is way out of the scope of this answer though. If you want more information you should check out the documentation:

https://webpack.js.org/concepts/

Alternatively this could make your life easier if you don't want to deal with the intricacies:

https://symfony.com/blog/introducing-webpack-encore-for-asset-management

Or:

https://github.com/JeffreyWay/laravel-mix