欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問(wèn)題

 更新時(shí)間:2022年07月28日 10:18:49   作者:小火車況且況且  
這篇文章主要介紹了Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

1. 問(wèn)題描述

出現(xiàn)的主要原因可以參照

vue腳手架文檔的解釋(這里是英文文檔, 主要是目前老夫?qū)戇@個(gè)博客時(shí), 中文文檔沒(méi)有這個(gè)頁(yè)面)

vue現(xiàn)代模式說(shuō)明

老夫的理解其實(shí)就是官方目前為了開啟<script type="module">的現(xiàn)代模式, 又為了適配低版本的瀏覽器從而添加<script nomodule>, 其實(shí)最直觀的感受就是打包的速度變慢了

老夫使用的是yarn各位彥祖可以直接替換為npm的, dist/js中帶有.gz后綴的是為了配置nginx的, 可以直接無(wú)視無(wú)視

問(wèn)題是如果直接使用yarn build目前是默認(rèn)開啟了現(xiàn)代模式, 就相當(dāng)于是輸入了yarn build --modern vue腳手架中對(duì)于build配置的部分說(shuō)明

這是dist/js中的打包后的代碼

這是打包后的 dist/index.html的文件, 之所以這樣子,是因?yàn)楸晃腋袷交? 可以看到, <script type="module">和<script nomodule>是共存的

2. 解決方法-不需要 type=“module”

2.1 可以yarn build --no-module

  • yarn build --no-module說(shuō)明打包之后,不生成<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的文件, 是沒(méi)有了<script type="module">

2.2 可以在.browserslistrc文件或者package.json中添加

browserslist的文檔說(shuō)明

.browserslistrc文件

> 1%
last 2 versions
not dead
not IE 11

package.json

"dependencies" : {},
"devDependencies": {},
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not dead",
  "not ie 11"
]

兩者選一個(gè)即可, 最后直接yarn build就行

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue項(xiàng)目報(bào)錯(cuò)Uncaught runtime errors的解決方案

    vue項(xiàng)目報(bào)錯(cuò)Uncaught runtime errors的解決方案

    使用vue-cli的vue項(xiàng)目,出現(xiàn)編譯錯(cuò)誤或警告時(shí),在瀏覽器中顯示全屏覆蓋,提示報(bào)錯(cuò)Uncaught runtime errors,本文給大家介紹了vue項(xiàng)目報(bào)錯(cuò)Uncaught runtime errors的解決方案,需要的朋友可以參考下
    2024-01-01
  • vue 獲取url參數(shù)、get參數(shù)返回?cái)?shù)組的操作

    vue 獲取url參數(shù)、get參數(shù)返回?cái)?shù)組的操作

    這篇文章主要介紹了vue 獲取url參數(shù)、get參數(shù)返回?cái)?shù)組的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11
  • vue與iframe之間的信息交互的實(shí)現(xiàn)

    vue與iframe之間的信息交互的實(shí)現(xiàn)

    這篇文章主要介紹了vue與iframe之間的信息交互的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • vue列表數(shù)據(jù)發(fā)生變化指令沒(méi)有更新問(wèn)題及解決方法

    vue列表數(shù)據(jù)發(fā)生變化指令沒(méi)有更新問(wèn)題及解決方法

    這篇文章主要介紹了vue中使用指令,列表數(shù)據(jù)發(fā)生變化指令沒(méi)有更新問(wèn)題,本文給出了解決辦法,需要的朋友可以參考下
    2020-01-01
  • vue 指定組件緩存實(shí)例詳解

    vue 指定組件緩存實(shí)例詳解

    keep-alive 是 Vue 內(nèi)置的一個(gè)組件,可以使被包含的組件保留狀態(tài),或避免重新渲染。這篇文章主要介紹了vue 指定組件緩存,需要的朋友可以參考下
    2018-04-04
  • vue實(shí)現(xiàn)上傳圖片添加水印

    vue實(shí)現(xiàn)上傳圖片添加水印

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)上傳圖片添加水印,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue3?hook自動(dòng)導(dǎo)入原理解析

    vue3?hook自動(dòng)導(dǎo)入原理解析

    這篇文章主要介紹了vue3?hook自動(dòng)導(dǎo)入的原理,介紹了API的自動(dòng)導(dǎo)入及組件的自動(dòng)導(dǎo)入,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • 一文完全掌握Vue中的$set方法

    一文完全掌握Vue中的$set方法

    這篇文章主要給大家介紹了關(guān)于如何完全掌握Vue中$set方法的相關(guān)資料,vue中$set方法對(duì)數(shù)組和對(duì)象的處理本質(zhì)上的一樣的,對(duì)新增的值添加響應(yīng)然后手動(dòng)觸發(fā)派發(fā)更新,需要的朋友可以參考下
    2023-11-11
  • 淺談使用mpvue開發(fā)小程序需要注意和了解的知識(shí)點(diǎn)

    淺談使用mpvue開發(fā)小程序需要注意和了解的知識(shí)點(diǎn)

    這篇文章主要介紹了淺談使用mpvue開發(fā)小程序需要注意和了解的知識(shí)點(diǎn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-05-05
  • Vite?Vue3?EsLint?Prettier配置步驟極簡(jiǎn)方法詳解

    Vite?Vue3?EsLint?Prettier配置步驟極簡(jiǎn)方法詳解

    這篇文章主要為大家介紹了Vite?Vue3?EsLint?Prettier配置步驟的極簡(jiǎn)方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09

最新評(píng)論