Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題
1. 問題描述
出現(xiàn)的主要原因可以參照
vue腳手架文檔的解釋(這里是英文文檔, 主要是目前老夫?qū)戇@個博客時, 中文文檔沒有這個頁面)
老夫的理解其實(shí)就是官方目前為了開啟<script type="module">的現(xiàn)代模式, 又為了適配低版本的瀏覽器從而添加<script nomodule>, 其實(shí)最直觀的感受就是打包的速度變慢了
老夫使用的是yarn各位彥祖可以直接替換為npm的, dist/js中帶有.gz后綴的是為了配置nginx的, 可以直接無視無視
問題是如果直接使用yarn build目前是默認(rèn)開啟了現(xiàn)代模式, 就相當(dāng)于是輸入了yarn build --modern vue腳手架中對于build配置的部分說明
這是dist/js中的打包后的代碼
這是打包后的 dist/index.html的文件, 之所以這樣子,是因為被我格式化了, 可以看到, <script type="module">和<script nomodule>是共存的
2. 解決方法-不需要 type=“module”
2.1 可以yarn build --no-module
yarn build --no-module
說明打包之后,不生成<script type="module">
npx vue-cli-service help build
可以查看build
后面添加的指令
Usage: vue-cli-service build [options] [entry|pattern] Options: --mode specify env mode (default: production) --dest specify output directory (default: dist) --no-module build app without generating <script type="module"> chunks for modern browsers --target app | lib | wc | wc-async (default: app) --inline-vue include the Vue module in the final bundle of library or web component target --formats list of output formats for library builds (default: commonjs,umd,umd-min) --name name for lib or web-component mode (default: "name" in package.json or entry filename) --filename file name for output, only usable for 'lib' target (default: value of --name) --no-clean do not remove the dist directory contents before building the project --report generate report.html to help analyze bundle content --report-json generate report.json to help analyze bundle content --skip-plugins comma-separated list of plugin names to skip for this run --watch watch for changes --stdin close when stdin ends
打包后的dist/js中的文件
這是打包后的 dist/index.html的文件, 是沒有了<script type="module">
2.2 可以在.browserslistrc文件或者package.json中添加
.browserslistrc
文件
> 1% last 2 versions not dead not IE 11
package.json
"dependencies" : {}, "devDependencies": {}, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ]
兩者選一個即可, 最后直接yarn build就行
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項目報錯Uncaught runtime errors的解決方案
使用vue-cli的vue項目,出現(xiàn)編譯錯誤或警告時,在瀏覽器中顯示全屏覆蓋,提示報錯Uncaught runtime errors,本文給大家介紹了vue項目報錯Uncaught runtime errors的解決方案,需要的朋友可以參考下2024-01-01vue 獲取url參數(shù)、get參數(shù)返回數(shù)組的操作
這篇文章主要介紹了vue 獲取url參數(shù)、get參數(shù)返回數(shù)組的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue與iframe之間的信息交互的實(shí)現(xiàn)
這篇文章主要介紹了vue與iframe之間的信息交互的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04vue列表數(shù)據(jù)發(fā)生變化指令沒有更新問題及解決方法
這篇文章主要介紹了vue中使用指令,列表數(shù)據(jù)發(fā)生變化指令沒有更新問題,本文給出了解決辦法,需要的朋友可以參考下2020-01-01淺談使用mpvue開發(fā)小程序需要注意和了解的知識點(diǎn)
這篇文章主要介紹了淺談使用mpvue開發(fā)小程序需要注意和了解的知識點(diǎn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05Vite?Vue3?EsLint?Prettier配置步驟極簡方法詳解
這篇文章主要為大家介紹了Vite?Vue3?EsLint?Prettier配置步驟的極簡方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09