uniapp 引入非模块化js

uniapp开发的H5,引入第三方的非模块化.js文件，如self.js，就是纯js文件，没有module.exports暴露出来成为一个对象，

这种放在common文件夹下，引入会提示找不到，这时候应该把该

self.js放在static文件夹下， uniapp发行H5时static文件下的内容不编译，在并在入口.html文件中引入全局js，在.vue页面中直接引用就行

1、self.js：

var aa="cc";
function getInfo(){
	console.log("xinxi")
}

2、index.html

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7         <title>
 8             <%= htmlWebpackPlugin.options.title %>
 9         </title>
10         <!-- 正式发布的时候使用，开发期间不启用。↓ -->
11         <!-- <script src="/h5/touch-emulator.js"></script>
12         <script>
13             TouchEmulator();
14             if (document.documentElement.clientWidth > 1024) {
15                 window.location.href = '/h5/pcguide.html#'+location.pathname+location.search;
16             }
17         </script>
18         <style>
19             ::-webkit-scrollbar{
20                 display: none;
21             }
22         </style>
23         <script>
24             var _hmt = _hmt || [];
25             (function() {
26                 var hm = document.createElement("script");
27                 hm.src = "https://hm.baidu.com/hm.js?";// 百度统计key
28                 var s = document.getElementsByTagName("script")[0];
29                 s.parentNode.insertBefore(hm, s);
30             })();
31         </script> -->
32         <!-- 正式发布的时候使用，开发期间不启用。↑ -->
33         <script>
34             // document.addEventListener('DOMContentLoaded', function() {
35             //     document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
36             // })
37         </script>
38         <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
39     </head>
40     <body>
41         <!-- 该文件为 H5 平台的模板 HTML，并非应用入口。 -->
42         <!-- 请勿在此文件编写页面代码或直接运行此文件。 -->
43         <!-- 详见文档：https://uniapp.dcloud.io/collocation/manifest?id=h5-template -->
44         <noscript>
45             <strong>Please enable JavaScript to continue.</strong>
46         </noscript>
47         <div id="app"></div>
48         <!-- built files will be auto injected -->
49         <script>
50             /*BAIDU_STAT*/
51         </script>
52         
53            <script src="/static/self.js"></script>
54     </body>
55 </html>
View Code

3、在.vue页面中引用

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {    
            console.log("sss",    aa)
            getInfo();
        },
        methods: {

        }
    }
</script>

效果：

 

ps：其他：

1、新建index.html 并引入 self.js

 

2、manifest.json：配置模板路径

 

posted @ 2023-06-30 11:03  蓝色精灵jah  阅读(919)  评论(0)  编辑  收藏  举报