Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題
1. 問題描述
出現(xiàn)的主要原因可以參照
vue腳手架文檔的解釋(這里是英文文檔, 主要是目前老夫?qū)戇@個(gè)博客時(shí), 中文文檔沒有這個(gè)頁面)
老夫的理解其實(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腳手架中對(duì)于build配置的部分說明
這是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說明打包之后,不生成<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"
]兩者選一個(gè)即可, 最后直接yarn build就行
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
隨著前端技術(shù)的發(fā)展,CSS?變量（也稱為?CSS?定制屬性）成為了現(xiàn)代?Web?開發(fā)中不可或缺的一部分,在?Vue.js?應(yīng)用程序中,使用?CSS?變量不僅可以增強(qiáng)樣式的靈活性,還能提高開發(fā)效率,本文將詳細(xì)介紹如何在?Vue?項(xiàng)目中引入并使用?CSS?變量,需要的朋友可以參考下2024-09-09
本文主要介紹了解決vue.js not detected的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue實(shí)現(xiàn)兩級(jí)select聯(lián)動(dòng)+input賦值+select選項(xiàng)清空
這篇文章主要介紹了vue實(shí)現(xiàn)兩級(jí)select聯(lián)動(dòng)+input賦值+select選項(xiàng)清空過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue+elementUI中使用Echarts之餅圖問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vite+vue3搭建的工程熱更新失效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
基于Vue和ECharts實(shí)現(xiàn)定時(shí)更新與倒計(jì)時(shí)功能的實(shí)戰(zhàn)分享
在前端開發(fā)中,動(dòng)態(tài)數(shù)據(jù)展示和用戶交互是構(gòu)建現(xiàn)代 Web 應(yīng)用的核心需求之一,在本篇博客中,我們將通過一個(gè)簡單的案例,展示如何在 Vue 中結(jié)合 ECharts 實(shí)現(xiàn)一個(gè)定時(shí)更新和倒計(jì)時(shí)功能,用于實(shí)時(shí)監(jiān)控和數(shù)據(jù)可視化,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了如何在nvue頁面中使用webview組件,并詳細(xì)介紹了如何在h5項(xiàng)目中安裝和配置npmiy_uniwebview插件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問題
這篇文章主要介紹了VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vue文本模糊匹配功能如何實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了vuejs對(duì)接后端踩過的坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12