最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

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

1. 問題描述

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

vue腳手架文檔的解釋(這里是英文文檔, 主要是目前老夫寫這個博客時, 中文文檔沒有這個頁面)

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

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

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

問題是如果直接使用yarn build目前是默認開啟了現(xiàn)代模式, 就相當于是輸入了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中添加

browserslist的文檔說明

.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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • Vue自定義CSS變量的使用方法

    Vue自定義CSS變量的使用方法

    隨著前端技術的發(fā)展,CSS?變量(也稱為?CSS?定制屬性)成為了現(xiàn)代?Web?開發(fā)中不可或缺的一部分,在?Vue.js?應用程序中,使用?CSS?變量不僅可以增強樣式的靈活性,還能提高開發(fā)效率,本文將詳細介紹如何在?Vue?項目中引入并使用?CSS?變量,需要的朋友可以參考下
    2024-09-09
  • 解決vue.js not detected的問題

    解決vue.js not detected的問題

    本文主要介紹了解決vue.js not detected的問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-02-02
  • vue實現(xiàn)兩級select聯(lián)動+input賦值+select選項清空

    vue實現(xiàn)兩級select聯(lián)動+input賦值+select選項清空

    這篇文章主要介紹了vue實現(xiàn)兩級select聯(lián)動+input賦值+select選項清空過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • vue+elementUI中使用Echarts之餅圖問題

    vue+elementUI中使用Echarts之餅圖問題

    這篇文章主要介紹了vue+elementUI中使用Echarts之餅圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vite+vue3搭建的工程熱更新失效問題及解決

    vite+vue3搭建的工程熱更新失效問題及解決

    這篇文章主要介紹了vite+vue3搭建的工程熱更新失效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 基于Vue和ECharts實現(xiàn)定時更新與倒計時功能的實戰(zhàn)分享

    基于Vue和ECharts實現(xiàn)定時更新與倒計時功能的實戰(zhàn)分享

    在前端開發(fā)中,動態(tài)數(shù)據(jù)展示和用戶交互是構建現(xiàn)代 Web 應用的核心需求之一,在本篇博客中,我們將通過一個簡單的案例,展示如何在 Vue 中結合 ECharts 實現(xiàn)一個定時更新和倒計時功能,用于實時監(jiān)控和數(shù)據(jù)可視化,需要的朋友可以參考下
    2025-01-01
  • uni-app中app和webview的h5通信簡單步驟

    uni-app中app和webview的h5通信簡單步驟

    這篇文章主要介紹了如何在nvue頁面中使用webview組件,并詳細介紹了如何在h5項目中安裝和配置npmiy_uniwebview插件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2025-02-02
  • VUE使用echarts?5.0以上版本渲染器未導入錯誤問題

    VUE使用echarts?5.0以上版本渲染器未導入錯誤問題

    這篇文章主要介紹了VUE使用echarts?5.0以上版本渲染器未導入錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • Vue文本模糊匹配功能如何實現(xiàn)

    Vue文本模糊匹配功能如何實現(xiàn)

    這篇文章主要介紹了Vue文本模糊匹配功能如何實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-07-07
  • vuejs對接后端踩過的坑記錄

    vuejs對接后端踩過的坑記錄

    這篇文章主要介紹了vuejs對接后端踩過的坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-12-12

最新評論

台东县| 朝阳区| 安龙县| 伊川县| 鄱阳县| 桂东县| 当涂县| 曲麻莱县| 仙居县| 南昌市| 自贡市| 罗江县| 芦山县| 方城县| 湘潭市| 黄平县| 汤原县| 瓮安县| 揭西县| 昆明市| 仙游县| 无为县| 彩票| 阿拉善盟| 镇安县| 昌乐县| 安平县| 囊谦县| 江阴市| 那坡县| 清水县| 资兴市| 胶州市| 东兴市| 松溪县| 昔阳县| 如皋市| 蕲春县| 曲沃县| 建德市| 岳阳市|