Vue3.x的版本中build后dist文件中出现legacy的js文件问题

 更新时间:2022年07月28日 10:18:49   作者:小火车况且况且  
这篇文章主要介绍了Vue3.x的版本中build后dist文件中出现legacy的js文件问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

1. 问题描述

出现的主要原因可以参照

vue脚手架文档的解释(这里是英文文档, 主要是目前老夫写这个博客时, 中文文档没有这个页面)

vue现代模式说明

老夫的理解其实就是官方目前为了开启<script type="module">的现代模式, 又为了适配低版本的浏览器从而添加<script nomodule>, 其实最直观的感受就是打包的速度变慢了

老夫使用的是yarn各位彦祖可以直接替换为npm的, dist/js中带有.gz后缀的是为了配置nginx的, 可以直接无视无视

问题是如果直接使用yarn build目前是默认开启了现代模式, 就相当于是输入了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就行

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 每天学点Vue源码之vm.$mount挂载函数

    每天学点Vue源码之vm.$mount挂载函数

    这篇文章主要介绍了vm.$mount挂载函数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vuecli中chainWebpack的常用操作举例

    vuecli中chainWebpack的常用操作举例

    在项目开发中我们难免碰到需要对webpack配置更改的情况,下面这篇文章主要给大家介绍了关于vuecli中chainWebpack的常用操作举例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 如何使用Vue+Element做个个人中心

    如何使用Vue+Element做个个人中心

    我们在做了用户登录后,就会让用户跳转到个人中心,下面这篇文章主要给大家介绍了关于如何使用Vue+Element做个个人中心的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • Vue3指令之搜索框输入防抖功能实现

    Vue3指令之搜索框输入防抖功能实现

    在Vue开发中遇到了搜索框输入防抖处理,算是防抖的使用场景之一吧,这篇文章主要给大家介绍了关于Vue3指令之搜索框输入防抖功能实现的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue微信分享插件使用方法详解

    vue微信分享插件使用方法详解

    这篇文章主要介为大家详细绍了vue微信分享插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • vue init webpack 建vue项目报错的解决方法

    vue init webpack 建vue项目报错的解决方法

    今天小编就为大家分享一篇vue init webpack 建vue项目报错的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue+axios 实现http拦截及路由拦截实例

    Vue+axios 实现http拦截及路由拦截实例

    这篇文章主要介绍了Vue+axios 实现http拦截及路由拦截 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Vue3实现跨页面传值的几种常见方法

    Vue3实现跨页面传值的几种常见方法

    在Vue 3中,跨页面传值可以通过多种方式实现,具体选择哪种方法取决于应用的具体需求和页面间的关系,本文列举了几种常见的跨页面传值方法,感兴趣的同学跟着小编来看看吧
    2024-04-04
  • 进入Hooks时代写出高质量react及vue组件详解

    进入Hooks时代写出高质量react及vue组件详解

    这篇文章主要介绍了Hooks时代中如何写出高质量的react和vue组件的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • VUE3函数的声明和使用举例

    VUE3函数的声明和使用举例

    这篇文章主要给大家介绍了关于VUE3函数的声明和使用的相关资料, Vue3是一种流行的JavaScript框架,它允许开发人员构建现代化的Web应用程序,需要的朋友可以参考下
    2023-07-07

最新评论