vue3服务端渲染警告解决----DefinePlugin

Bundler 构建功能标志

有关 vuejs.org 的详细参考

esm-bundlerVue 的构建公开了可以在编译时覆盖的全局特性标志:

  • __VUE_OPTIONS_API__

    • 违约:true
    • 启用/禁用选项 API 支持
  • __VUE_PROD_DEVTOOLS__

    • 违约:false
    • 在生产环境中启用/禁用 devtools 支持
  • __VUE_PROD_HYDRATION_MISMATCH_DETAILS__

    • 违约:false
    • 启用/禁用生产中水合作用不匹配的详细警告

该版本无需配置这些标志即可工作,但强烈建议正确配置它们,以便在最终捆绑包中获得适当的树摇动。

core/packages/vue 在 main ·vuejs/核心 (github.com)

可以通过webpack配置,去掉警告

DefinePlugin是Webpack的一个插件,它允许创建一个在编译时可以配置的全局常量。这对于开发模式和生产模式的构建非常有用,因为它们可能允许不同的行为。例如,如果在开发构建中需要执行日志记录,而在发布构建中不需要,则可以使用DefinePlugin中的全局常量来决定是否记录日志。

DefinePlugin中的每个键值都可以是一个标识符,或者通过.作为多个标识符。如果值是一个字符串,它会被当作一个代码片段来使用;如果值不是字符串,它会被转化为字符串(包括函数)。如果值是一个对象,则对象的所有key都会以同样的方式定义。此外,如果在一个key前面加了typeof,它会被定义为typeof调用。这些值会被内联进那些允许传一个代码压缩参数的代码中,从而减少冗余的条件判断。

通常,在定义环境变量时,有两种常见的用法:使用'production'或者JSON.stringify('production')。这样,DefinePlugin就能在编译阶段根据NODE_ENV自动配置环境变量,提升前端开发效率。


const { resolve } = require('path')
//针对node环境排除包,web环境不需要
const webpackNodeExternals = require('webpack-node-externals')
const { VueLoaderPlugin } = require('vue-loader/dist/index')
//解决浏览器警告
const { DefinePlugin } = require('webpack')
module.exports = {target: 'node',  //打包对象,打包时就不会打包fs path...mode: "development",entry: './src/server/index.js',output: {path: resolve(__dirname, '../build/server'),filename: 'server_bundle.js'},module: {rules: [{test: /\.js$/,loader: 'babel-loader',options: {presets: ["@babel/preset-env"]}},{test: /\.vue$/,loader: 'vue-loader',}]},externals: [webpackNodeExternals() //排除node_modules],resolve: {extensions: ['.js', '.json', '.was,', '.vue', '.jsx']},plugins: [new VueLoaderPlugin(),new DefinePlugin({__VUE_OPTIONS_API__: false,__VUE_PROD_DEVTOOLS__: false,__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false})]
}


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/776724.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024/3/27打卡更小的数(十四届蓝桥杯)——区间DP

目录 题目 思路 代码 题目 思路 题目说求数组某个区间中的数进行翻转,由于区间选择多,首先想到DP问题。 第一版想到的方法(错误的),当进行状态计算的时候,无法判定区间是否翻转后满足要求,…

c++|string模拟实现

目录 一、string.h 二、string.cpp 三、Test.cpp 对string的各种接口进行一个简易版的模拟实现,在模拟实现完之后对string的底层实现有了进一步的理解,了解大佬的编程写法思路。也算是对string有了一个小总结。 一、string.h 接口的声明。放在.h文件中…

MySQL安装和配置(超详细)

👨‍💻作者简介:👨🏻‍🎓告别,今天 📔高质量专栏 :☕java趣味之旅 欢迎🙏点赞🗣️评论📥收藏💓关注 💖衷心的希…

武汉星起航公司助力零经验新手卖家征战亚马逊跨境电商市场

在数字化浪潮的推动下,亚马逊跨境电商行业正逐渐成为众多创业者和企业家们的新战场。然而,对于零经验的新手卖家而言,这片广袤的电商海洋无疑充满了未知与挑战。在这个关键时刻,武汉星起航公司以其专业的服务和深厚的行业积累&…

day 36 贪心算法 part05● 435. 无重叠区间 ● 763.划分字母区间 ● 56. 合并区间

一遍过。首先把区间按左端点排序,然后右端点有两种情况。 假设是a区间,b区间。。。这样排列的顺序,那么 假设a[1]>b[0],如果a[1]>b[1],就应该以b[1]为准,否则以a[1]为准。 class Solution { public:static bo…

老阳分享:视频号带货怎么做?有哪些方法?

在数字化浪潮中,视频号带货成为了一种新兴的商业模式,它结合了视频内容的吸引力和电商销售的便捷性,为品牌和商家带来了无限商机。那么,视频号带货究竟应该怎么做?又有哪些有效的方法呢? 首先,视频号带货的核心在于内…

行为管理设置能监控或者检测哪些东西

3 月 27 日,国新办举行“推动高质量发展”系列主题新闻发布会,浙江省省长王浩:全省市场经营主体 1040 万户,相当于平均每 6.5 个浙江人就有 1 个老板。 不由让小编想到,这么多老板,那么老板创办企业也怪不容…

【JavaEE】初识线程,线程与进程的区别

文章目录 ✍线程是什么?✍线程和进程的区别✍线程的创建1.继承 Thread 类2.实现Runnable接口3.匿名内部类4.匿名内部类创建 Runnable ⼦类对象5.lambda 表达式创建 Runnable ⼦类对象 ✍线程是什么? ⼀个线程就是⼀个 “执行流”. 每个线程之间都可以按…

大数据开发(离线实时音乐数仓)

大数据开发(离线实时音乐数仓) 一、数据库与ER建模1、数据库三范式2、ER实体关系模型 二、数据仓库与维度建模1、数据仓库(Data Warehouse、DW、DWH)1、关系型数据库很难将这些数据转换成企业真正需要的决策信息,原因如…

【快速解决】解决谷歌自动更新的问题,禁止谷歌自动更新,如何防止chrome自动升级 chrome浏览器禁止自动升级设置方法

目录 问题描述 解决方法 1、搜索栏搜索控制面板 2、搜索:服务 ​编辑 3、点击Windows工具 4、点击服务 ​5、禁止谷歌更新 问题描述 由于我现在需要装一个谷歌的驱动系统,但是目前的谷歌驱动系统的版本都太旧了,谷歌自身的版本又太新了…

上海:6月1日起取消企业复工复产白名单制

财经新闻5月29日消息:上海市人民政府关于印发《上海市加快经济恢复振兴行动计划》的通知。 《方案》包括千方百计缓解各类市场主体困难,全面有序推进复工复产和市场复工复产,多措并举稳外资稳外贸,大力促进消费加速复苏&#xff0…

argocd cli工具使用

一、前言 ragocd除了使用web界面操作之外,也可以通过argocd cli工具进行操作,关于集群创建、gitlab仓库创建、app创建都是可以通过yaml 文件去操作,使用web界面创建的操作也需要使用argocd cli工具进行备份 二、使用 在argocd部署的章节已经…

Windows安装Odoo结合内网穿透实现公网访问本地企业管理系统

文章目录 前言1. 下载安装Odoo:2. 实现公网访问Odoo本地系统:3. 固定域名访问Odoo本地系统 前言 Odoo是全球流行的开源企业管理套件,是一个一站式全功能ERP及电商平台。 开源性质:Odoo是一个开源的ERP软件,这意味着企…

盏燕生物科技将出席2024第七届燕窝天然滋补品博览会

参展企业介绍 深圳市盏燕生物科技有限公司,办公室地址位于中国第一个经济特区,鹏城深圳,深圳市龙岗区平湖街道禾花社区富安大道18号亚钢工贸大楼1栋1017A,我公司主要提供一般经营项目是:初级农产品、海产品、化妆品、…

R使用netmeta程序包实现生存数据的频率学网状meta分析

之前的推文系统的介绍了使用netmeta包实现对二分类变量、连续型变量和罕见事件的网状meta分析。今天的文章介绍如何使用netmeta程序包实现生存数据的频率学网状meta分析,用来评估6种免疫疗法( Camrelizumab、Tislelzumab、Toripalimab、Sintilimab、Pemb…

影视文件数字指纹签名检验系统的用户操作安全大多数

国内网盘服务大规模出现版权问题。 一些个人或团体会通过云存储客户端将主要由电影、电视、音乐组成的文件上传到网盘,然后在圈子里分享。 可供下载。 大量受版权保护的视频音乐就是通过这种特殊的盗版方式传播的,而这种传播方式暂时不受监管。 一些云存…

STM32/GD32——自己制定协议和解析协议数据

温馨提醒: 由于我最害怕的就是接触各种新协议,尤其是对各种协议和解析协议数据简直就是职业生涯的噩梦,但工作中不免和不同的协议打交道。本着要啃就啃最难的,大不了放弃的心态。所以我学习了如何自定义制定自己的协议&#xff0c…

小程序的编译上传

小程序如果是hbuilderx开发的,当开发完成后运行到小程序模拟器里面的微信开发者工具,或者(发行里面的小程序微信(仅适用于uniapp)),然后打开微信开发者工具的 项目→里面的导入项目 &#x…

k8s 如何获取加入节点命名

当k8s集群初始化成功的时候&#xff0c;就会出现 加入节点 的命令如下&#xff1a; 但是如果忘记了就需要找回这条命令了。 kubeadm join 的命令格式如下&#xff1a;kubeadm join --token <token> --discovery-token-ca-cert-hash sha256:<hash>--token 令牌--…

虚拟机-从头配置Ubuntu18.04(包括anaconda,cuda,cudnn,pycharm,ros,vscode)

最好先安装anaconda后cuda和cudnn&#xff0c;因为配置环境的时候可能conda会覆盖cuda的路径&#xff08;不确定这种说法对不对&#xff0c;这里只是给大家的建议&#xff09; 准备工作&#xff1a; 1.Ubuntu18.04&#xff0c;x86_64&#xff0c;amd64 虚拟机下载和虚拟机Ubu…