vue-cli3.0 import static js file

As some demonstration, the need for coding names, etc. can quickly make changes, you need to configure the page easily. Due to the build vue basic items have not see as it is, we need to create a file, and will not be compiled when packaged.

vue-cli 2.0 approach is to create a js under static file. vue-cli written rule 3.0 is to create js directly in public folders,

Specific operation is as follows:

1, created under the public folder config.js file, file syntax which is es5, not allowed to use the browser is not compatible with the es6 syntax. Because the file does not compile, incompatible es6 part of the syntax browser.

2. In html file, using <scrtipt> tag enters

3, you can use the native method according to the page directly.

　　For example config.js defines a variable called config, and after the introduction of index.html page, the page can be used directly in any one place.　　　

config.js

/ * Custom global variables, this file is not compiled, written and therefore need native * / 
the let config = { 
  networkGuard: { 
    accountDBID: '9E54B0CA55E447148211ACEA6F911FBC', table // account, police data network - Account ID associated 
    countDBQry: [/ / account table search conditions, needs, and the search condition data table associating 
      {fieldCode: "account", fieldName : " account", searchRule: "LK", javaType: "varchar", similar: 0, fieldValue: ''}, // fieldValue need to enter the page assignment query 
      {fieldCode: "update_time", fieldName : " update time", searchRule: "BET", javaType: "datetime", similar: 0, min: "2017-01-01 00:00: 00 ", max: ''} // max is the time of day: 23: 59: 59 
    ], 
  } 
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="./config.js" type="text/javascript"></script>
</html>

Use page:

queryFun () { 
        IF (! this.mobile) { 
          return to false 
        } 
        // verify expression to enter the phone number does not 
        const reg = / ^ [1] [3,4,5,7,8] [0-9] 9} $ {/ 
        IF {(reg.test (this.mobile)!) 
          the this $ the Message. ({showClose: to true, the Message: 'Please enter the correct phone number!', of the type: 'warning'}) 
          return false 
        } config.networkGuard.countDBQry [0] = .fieldValue this.mobile 
        Object.assign (this.listQuery, { DatabaseID: config.networkGuard.accountDBID,    the params: config.networkGuard.countDBQry 
        }) 
    ......

　Personal error log:

　　In a development environment, I created config.js file in the public, and for export with export default method. Use the page where the use of import config from XXX entering introduced. The development process, there is no problem, but after packaged and released, found that modifying config file does not take effect.

　　After investigation realized: no package compiled js file does not recognize es6 grammar, and should not be introduced using the import method. Js file should be used in accordance with native

vue-cli3.0 import static js file

Guess you like