※本地引入

把你需要的文件放入到assets文件夹中，然后在需要引入的组件中import引入。
优点：动态加载。在需要的组件中单独引入
缺点：如果文件资源比较大，比如城市资源。在build的时候会增加整体项目包的大小

  1. import provinceCityList from "../../assets/provinceCityList.js";

※CDN引入

第一种方式：全局引入

全局添加你的cdn文件，然后在你需要的组件，直接import引入

  1. //cdn镜像源
  2. exports.externalConfig = {
  3.   css: [
  4.     'https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/theme-chalk/index.css'
  5.   ],
  6.   js: [
  7.     'https://cdn.jsdelivr.net/npm/babel-polyfill@6.26.0/dist/polyfill.min.js',
  8.     'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
  9.     'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
  10.     'https://cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',
  11.     'https://cdn.jsdelivr.net/npm/vuex@3.5.1/dist/vuex.min.js',
  12.     'https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/index.js',
  13.     'https://file.40017.cn/zhuketong/zhuketong/data/cityList.js?v=2020111901',
  14.     'https://cdn.jsdelivr.net/npm/vue-lazyload@1.3.3/vue-lazyload.min.js'
  15.   ]
  16. }
  1. import cityList from "cityList";

具体静态文件js的写法

  1. var yeepayBankList = 'JSON数据';
  3. if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
  4.   module.exports = yeepayBankList;
  5. }
  6. else {
  7.   if (typeof define === 'function' && define.amd) {
  8.     define([], function() {
  9.       return yeepayBankList;
  10.     });
  11.   }
  12.   else {
  13.     window.YeepayBankList = yeepayBankList;
  14.   }
  15. }

第二种方式 Dom引入js

  1. export default {
  2.   mounted() {
  3.     const s = document.createElement('script');
  4.     s.type = 'text/javascript';
  5.     s.src = '你的需要的js文件地址';
  6.     document.body.appendChild(s);
  7.   },
  8. }

优点：CDN引入，减少本地文件包的大小，在项目初始化的时候会直接加载资源
缺点：全局引入，项目初始的时候就会加载。可能受CDN的稳定性影响

※Fetch引入方式

类似promise方式，支持跨域，同时针对资源可以做出成功和失败的响应

  1.  fetch('./data/name.json')  
  2.    .then( (res) => {  return res.json() } )//对fetch进行格式化，否则读取不到内容  
  3.    .then( (data) => { console.log(data)} )//拿到格式化后的数据data  
  4.    .catch(error=>console.log(error))  
  5. },

image.png
优点：在需要的地方直接引入就行,同时资源可以做好成功失败的监控
缺点：IE无法兼容，需要采用Fetch-Polyfill
fetch是什么

总结

第二种的第一种方式方案更优