cli3打包js無法導入的簡單介紹

本文目錄一覽：

• 1、vue-cli3打包之後的文件為何不能本地打開
• 2、vuecli3打包部署 非根目錄下 配置vue.config.js publicPath
• 3、vue-cli3 pubic靜態資源引入
• 4、VueCLI3打包優化–抽離依賴包
• 5、vue打包後發布文件路徑錯誤且報錯Unexpected token
• 6、關於Vue-cli引入外部js資源文件失敗的一點思路

vue-cli3打包之後的文件為何不能本地打開

meta charset=”utf-8″

vue-cli 提供了一個入口讓你能配置修改 webpack .

在根目錄下新建一個 vue.config.js 文件, 然後在其中修改 publicPath 這個選項:

vue.config.js :

將這個選項設置為 ‘/’ (當前文件夾).

現在你就可以本地打開 dist 文件夾中的 index.html 了.

但是會有一個小問題, 就是如果你使用了 vue-router (路由)的話, 會發現路由跳轉有問題了.

這個路徑明顯不對呀…

原來是因為我的 vue-router 的模式設置成了 history 模式:

src/router/index.js :

只要把 mode 改為 hash 就可以正常跳轉了(其實默認是這個模式的, 但如果你的項目中mode被改了你得知道是這個問題).

vuecli3打包部署 非根目錄下 配置vue.config.js publicPath

從 Vue CLI 3.3 起已棄用baseUrl，請使用publicPath。

默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 ，則設置 publicPath 為 /my-app/。

這個值在開發環境下同樣生效。如果你想把開發服務器架設在根路徑，你可以使用一個條件式的值：

在vue.config.js文件中添加如下：

vue-cli3 pubic靜態資源引入

靜態資源文件放入public文件夾下（類似cli2裡面的static文件夾），打包時不會被wenpack處理，輸出文件在dist文件夾下。

在index.html中通過

script src=”%= BASE_URL %clipboard.min.js”/script

參考

link rel=”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

VueCLI3打包優化–抽離依賴包

項目開發中，使用了很多依賴包，如 Vue 、路由管理 Vue-router 、狀態管理 Vuex 、UI組件庫( ElementUI 、 Vant )、圖表（ echarts ）等。打包構建，發現有一些包體積過大，會影響首頁加載速度。如下所示：

從上圖的分析包中，可以將以下插件抽離：

需要刪除的依賴包

VueCLI3自帶了 webpack analzer ,可通過如下命令即可生成分析包內容，在 dist/report.html

更多請查看：

減少打包體積、加快打包速度，常規的優化有以下兩種：

按需加載是通過只引用使用的組件來減少體積，這就會有一個問題：如果項目重度依賴第三方插件（如 ElementUI 、 vant ），那麼此方案將無法減少打包的體積。

這裡選擇CDN的方式， 配置流程 ：

可根據環境變量，僅在線上採取使用CDN,開發環境直接使用npm依賴包即可。

進行包分離以後，打包結果：

vue.config.js 的pages為：

修改如下的地方：

外部擴展(externals)

使用webpack的externals來指定echarts無法減少包的大小

vue-cli利用webpack-bundle-analyzer分析構建產物

vue打包後發布文件路徑錯誤且報錯Unexpected token

項目執行npm run dev和npm run build-dev(開發環境打包)都沒有問題

當使用npm run build-prod(生產環境)打包，發布之後查看報錯：

此處所採用的的是vue-cli2.x

1.修改文件config/index.js，修改build配置中的內容

如上修改後打包可以打開不在報錯，但是找不到圖片以及文字了

2.修改build/utils.js文件，修改publicPath

重新打包後，訪問正常

用過與該項目相同的腳手架，搭建了兩個項目，然而另外的項目卻沒有該問題，暫未發現問題所在。

本項目Nginx配置中存在前置web-pmms

最終還原了上方的三處修改，將config/index.js中assetsPublicPath做如下修改

assetsPublicPath是配置為相對路徑還是絕對路徑，取決於你打包後前端資源怎麼發布部署

vue-cli2.x版本

情況1： 如果應用配置在一個域名的根路徑上，例如，則直接配置assetsPublicPath:’/’;

情況2： 如果應用配置在一個域名的子路徑上，例如 ，則應設置assetsPublicPath:’/myapp/’;

這個值也可以設置為空字符串(”)或相對路徑(‘./’)，這樣所有資源都會被鏈接為相對路徑，這樣打包後的文件可以被部署在任意路徑。

vue-cli3.x版本

需要在vue.config.js 添加baseUrl:‘xxx’

vue-cli 4.x版本

需要在 vue.config.js 中修改 publicPath:’xxx’

關於Vue-cli引入外部js資源文件失敗的一點思路

首先申明我是window系統下Vue-cli 4.5.3版本，腳手架整體基於vue2內核。

1.正常js文件如果有使用export向外暴露對象，將js放在src/assets都是可以通過import直接引入。但有有些情況下我們需要導入第三方的js文件，例如近期我在做的阿里雲點播視頻上傳SDK，包括最近在學習的ThreeJs，如果單單只是在public中index.html通過script src=””/script引入，是不夠的還需要在具體vue頁面引入：

這也是我嘗試兩天才成功，走了些彎路，希望幫助到有同樣問題的打工人，共勉!