SoFunction
Updated on 2025-04-12

Uniapp introduces four ways to modular js files and non-modular js files

Method 1: Introduce ordinary js files, such as

1.1. The properties and methods are written inside a variable

const user={
    login:true,
    isLogin:function(data){
        ("Display user login information")
    }
}
export default user;

1.2. You can also write it separately

function isLogin(data){
    ("Display user login information")
}
function getMobile(data){
    ("22222222")
}
 
export default {
    isLogin,
    getMobile
}

Quote in .vue page:

<script>
    // Absolute path, @ points to the project root directory, @ points to the src directory in the cli project    import userfrom '@/common/';
    // Relative path    import user from '../../common/';
 
    export default {
        ...
        methods: {
            test(){
                ()  //Specific use            }
        }
    }
 
</script>

Notice

  • js files do not support the introduction of using/start

Method 2: Put it in the entry file and become a global method

import user from './common/';
.$user = user;

Quote in .vue page:

<script>
    export default {
        ...
        methods: {
            test(){
                this.$()//Specific use            }
        }
    }
</script>

Method 3: Introduce third-party modular .js files

For example, encrypted files can be placed in the common folder and referenced as ordinary .js files, and modularly exposed them to become an object:

var exports = createMethod();
if (COMMON_JS) {
     = exports;
} else {
    root.md5 = exports;
    if (AMD) {
        define(function () {
            return exports;
        });
    }
}

Quote in .vue page:

<script>
    import md5 from '../../common/';
    export default {
        ...
        methods: {
            test(){
                let sign = md5(getSignStr(arrKeys, arrValues)).toUpperCase();
            }
        }
    }
</script>

Method 4: H5 developed by uniapp, introducing third-party non-modular .js files

For example, it is a pure JS file, which is not exposed to an object. If this is placed in the common folder, it will prompt that it cannot be found if it is introduced like above. At this time, it should be placed in the static folder. When Uniapp releases H5, the content under the static file will not be compiled. In and introduce global JS in the entrance .html file, just reference it directly in the .vue page.

4.1、

function isNoModule(data){
    ("3333333")
}

4.2. And introduce global js in the entrance .html file

<script charset="utf-8" src="<%= BASE_URL %>static/"></script>

4.3. Quoting in .vue page

<script>
    export default {
        ...
        methods: {
            test(){
                isNoModule();
            }
        }
    }
</script>

This is the article about the introduction of modular js files and non-modular js files of Uniapp. For more related contents of modular js files of Uniapp, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!