Ⅰ vue引入靜態文件
vue-cli3靜態資源配置
靜態資源可以通過兩種方式進行處理：
在javaScript被導入或在template/CSS中通過相對路徑被引用。這類引用會被webpack處理。
放置在public目錄下或通過絕對路徑被引用。這類資源將會直接被拷貝，而不會經過webpack的處理。
使用相對路徑引入的靜態資源文件，會被webpack處理解析為模塊依賴。例如，在imgsrc="./logo.png"和background:url(./logo.png)，以及CSS@import"./logo.png"是相對的資源路徑。在vue2.x版本類似assets文件夾。
2.public文件夾
public文件夾下的文件並不會被Webpack處理：它們會直接被復制到最終的打包目錄（文件名需指定）下。必須使用絕對路徑引用這些文件，簡單說就是用來存放萬年不變的文件。
在vue2.x版本類似static/文件夾。
/public/logo.png
參考：
public/index.html文件是一個會被html-webpack-plugin處理的模板。構建中，各種資源路徑會被注入解析。可以使用lodashtemplate語法插入內容。
除了被html-webpack-plugin暴露的默認值之外，所有客戶端環境變數也可以直接使用。例如，BASE_URL的用法：
vue-cli3pubic靜態資源引入
靜態資源文件放入public文件夾下（類似cli2裡面的static文件夾），打包時不會被wenpack處理，輸出文件在dist文件夾下。
在index.html中通過
scriptsrc="%=BASE_URL%clipboard.min.js"/script
參考
linkrel="icon"href="%=BASE_URL%favicon.ico"
可以看到項目中ico圖標就是通過這種方式引入！！
public文件夾下文件是不被處理的，所以我們可以創建一個config.js文件
config.js
在index.html中引入
使用
遇到的問題，修改打包後的config.js文件，值不更新
排查方式：
1.先確認config.js文件是否更新，瀏覽器的緩存可能會影響
2.可以修改js文件名，比如加上hash值，config.hashxxx.js，在index.html引入的地方也要對應修改
綜上
本地測試ok
vue怎麼使用工具類中的static方法vue怎麼使用工具類中的static方法
在Vue項目中使用工具類中的靜態方法，需要先引入該工具類文件，然後通過工具類名稱來調用靜態方法。
例如，有一個工具類文件utils.js，其中包含一個靜態方法formatDate：
```
exportdefaultclassUtils{
staticformatDate(date){
//somecodehere
}
}
```
在Vue組件中引入該工具類文件，並調用靜態方法formatDate：
```
template
div
p{{formattedDate}}/p
/div
/template
script
importUtilsfrom'@/utils.js'
exportdefault{
data(){
return{
date:newDate()
}
},
computed:{
formattedDate(){
returnUtils.formatDate(this.date)
}
}
}
/script
```
在該Vue組件中，我們首先引入了utils.js文件，並在computed屬性中定義了一個formattedDate計算屬性，該計算屬性調用了工具類Utils的靜態方法formatDate來格式化日期。
Ⅱ vue外部js動態載入
vue載入遠程(網路)jsvue項目中有時候會遇到載入遠程（網路）js的情況，常用的方法有以下兩種：
以載入在線的cesium為例
在組件中可以通過window.Cesium來獲取載入的js，示例如下：
在main.js里注冊組件
注意：注冊組件一定要在newVue之前
在組件中使用：
這樣使用比較靈活還能在載入完成和載入失敗時做一些操作。
vue項目中插入外部js
script1.onload要在頁面載入js之前寫
···
constcenterRotationAd=document.getElementById("centerRotationAd");
···
VUE中如何動態編譯js需求：動態獲取一段字元串類型的js腳本，動態編譯它並且可以完美在vue中運行與之交互。
實現：動態編譯js的方式有eval和newfunction
簡單例子：
eval：
newfunction:
顯然後者更利於擴展，詳細了解區別可以參考鏈接內容：
要注意使用newFunction，在vue環境中直接賦值的方式函數作用域與賦值vue結構對象不同：
如何在.vue文件中引入外部jsVue的createElement方法，簡單的封裝一個組件解決問題。
解決方法
第一版代碼（直接在操作Dom）如下：
exportdefault{
mounted(){
consts=document.createElement('script');
s.type='text/javascript'
s.src=''
document.body.appendChild(s);
},
}
使用createElement方法：
exportdefault{
components:{
'dingtalk':{
render(createElement){
returncreateElement(
'script',
{
attrs:{
type:'text/javascript',
src:'',
},
},
);
},
},
},
}
//使用在頁面中調用
終極方案
通過封裝一個組件remote-js實現：
exportdefault{
components:{
'remote-js':{
render(createElement){
returncreateElement('script',{attrs:{type:'text/javascript',src:this.src}});
},
props:{
src:{type:String,required:true},
},
},
},
}
使用方法：
remote-jssrc=""remote-js