Vue-cli introduced static js files into indexl.html, and Android version 5.1 or later reported an error. - Codes Helper - Programming Question Answer

Vue-cli introduced static js files into indexl.html, and Android version 5.1 or later reported an error.

now some files in the project have to be introduced into index.html, and most mobile phone tests are fine, but when Android 5.1 was tested, it was found that the files introduced in index.html did not work.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1, maximum-scale=1" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="stylesheet" href="/static/css/shop.css">
    <title>shop</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="./static/js/config.js"></script>//5.1
    <script src="./static/js/jquery-3.2.1.min.js"></script>
    <script src="./static/js/jshop.min.js"></script>
  </body>
</html>

adding printing to the file will not print it out, and the page will report an error

config is full of configuration items, there is nothing complicated


var config= {};
config.api = "";
config.url = ";
//
config.login = "";
config.apia = "";

Javascript html css vue.js vue-cli

May.28,2022

see if there is es6 code in this js that has not been converted to es5

paste the code of the config file.

Today, after searching for a long time, it was finally solved! It is useless to try babel-polyfill and es6-promise.
the first problem, the reason for the incompatibility has been found. It is almost because the syntax of es6 is used in the external reference js file, because I did not write all the js in the screenshot, and there are a lot of referenced js files. Finally, I checked them one by one and found them. It is useful to let, and then the files in the static folder will not be processed when packaged. After the modification, it is compatible with Android 5.1.
the second problem, after solving the above problem, was tested on Android 4.4, and there was a white page problem, which did not even report an error. Later, it was simply modified directly in webpack.base.conf.js, adding static

to the compilation rules.

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('static/js'), resolve('test'),resolve('node_modules/webpack-dev-server/client')]
      },

although it doesn't feel right, I can't find any other way to solve the problem. If you see a better solution to this problem, let me know.
the main reason for the problem I encountered is that the external static js is not my own, and the best way to solve this problem is to put js in assets and then introduce it in main.js.
another thing is that now the answers to the search questions are very uniform, all talking about installing babel-polyfill and es6-promise and configuring them after introduction. The problems I have here should only be static files that have not been dealt with, so if you encounter similar problems, you can try to look at them from my point of view.

Previous: Multiple references to the same js, tree-shaking is invalid

Next: How does vue use vuex in customization files?

Menu