vue build 打包遇到bug解决记录

news2024/9/25 15:27:42

文章目录

  • vue-cli-service serve
  • vue打包修改dist文件夹名字
  • vue build `require is not defined` 和 `exports is not defind` 错误

vue-cli-service serve

通常vue是不能直接使用vue-cli-service命令在终端运行的,所以才会在package.json中配置了scripts:
在这里插入图片描述

仔细看每个scripts里面的环境开头都是vue-cli-service,其实只是换了一种方式运行vue-cli-service。
比如运行:npm run local,则相当于运行了命令:vue-cli-service serve --mode local --open --port 9040

vue-cli-service serve

  • 用法:vue-cli-service serve [options] [entry] 选项:
    • open 在服务器启动时打开浏览器
    • copy 在服务器启动时将 URL 复制到剪切版
    • mode 指定环境模式 (默认值:development)
    • host 指定 host (默认值:0.0.0.0)
    • port 指定 port (默认值:8080)
    • https 使用 https (默认值:false)
      vue-cli-service build
  • 用法:vue-cli-service build [options] [entry|pattern ]选项:
    • mode 指定环境模式 (默认值:production)
    • dest 指定输出目录 (默认值:dist)
    • modern 面向现代浏览器带自动回退地构建应用
    • target app | lib | wc | wc-async (默认值:app)
    • name 库或 Web Components 模式下的名字 (默认值:package.json 中的 “name” 字段或入口文件名)
    • no-clean 在构建项目之前不清除目标目录的内容
    • report 生成 report.html 以帮助分析包内容
    • report-json 生成 report.json 以帮助分析包内容
    • watch 监听文件变化
  • 其中详细请看官网:https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve

vue打包修改dist文件夹名字

  • 打包修改dist文件夹名字
  • 打包的命令是:
    vue-cli-service build --mode dev
    所以需要在package.json里面配置环境:
    build:dev: vue-cli-service build --mode dev,
    默认打包出来的文件夹是dist,如果需要修改则需要在后面配置—dest,如以下打包出来的文件在文件夹tingyuan目录下,直接运行npm run build:dev 即可打包:
    build:dev: vue-cli-service build --mode dev --dest tingyuan,

vue build require is not definedexports is not defind 错误

  • 问题描述:使用的是基于webpack的,webpack会默认带有require,但是在使用require.context的时候,一运行就报: require is not defined。百度找了很多无用的方法;
  • 最后发现vue.config.js配置文件里面的transpileDependencies设置为false即可:
    h

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

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

相关文章

精选 2023 年大厂高频 Java 面试真题集锦(含答案),面试一路开挂

本文涵盖了阿里巴巴、腾讯、字节跳动、京东、华为等大厂的 Java 面试真题,不管你是要面试大厂还是普通的互联网公司,这些面试题对你肯定是有帮助的,毕竟大厂一定是行业的发展方向标杆,很多公司的面试官同样会研究大厂的面试题。 …

小程序轮播图的两种后台方式(PHP)--【浅入深出系列008】

微信目录集链接在此: 详细解析黑马微信小程序视频–【思维导图知识范围】难度★✰✰✰✰ 不会导入/打开小程序的看这里:参考 让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】 文章目录 本系列校训学习资源的选择啥是轮播图轮播…

基于Android系统的外卖APP【纯干货分享,免费领源码04871】

摘要 立足于当下餐饮行业现有的点餐模式,分析传统APP点餐的运作流程,结合Android系统的特点设计新型的外卖APP。近几年,人们生活水平日益提升,但工作强度和压力不断增强,尤其是对于上班族而言,到餐厅吃饭费…

C++实现通用进制转换

C实现通用进制转换 #include <iostream> #include <string> #include <algorithm> #include <sstream> using namespace std; // 将一个字符转换为对应的数字 int charToNum(char c) { if (c > 0 && c < 9)return c - 0; el…

四旋翼无人机使用教程

文章目录 前言一、检查遥控器电源开关混控拨码开关微调开关飞行模式刹车开关行程开关接收机对码 二、检查飞机检查接线 三、解锁并飞行 前言 PX4固件 QGC地面站 Pixhwak飞控 Mc6c遥控器 开源飞控博大精深&#xff0c;欢迎广大爱好者加博主微信名片&#xff0c;一起学习交流。…

Windows版filehub安装教程

一个基于Github开发的文件存储软件&#xff0c;美其名曰&#xff1a;FileHub&#xff0c;可存万物&#xff0c;而且绝不和谐任何文件。类似于百度云盘的功能&#xff0c;但是功能上肯定达不到百度云盘的效果&#xff0c;但是基本功能还是有的&#xff1a;例如登录注册&#xff…

C语言每天一练:输出杨辉三角

题目&#xff1a;请输出以下杨辉三角(要求输出前10行) 列&#xff1a; 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 ...... 题解析&#xff1a;不了解杨辉三角的可以百度看一下&#xff0c;大概是这样的&#xff0c;咱们就可以解…

日撸代码300行:第55天(基于 M-distance 的推荐 (续))

代码来自闵老师”日撸 Java 三百行&#xff08;51-60天&#xff09;“&#xff0c;链接&#xff1a;https://blog.csdn.net/minfanphd/article/details/116975957 工作承接第54天的基于M-distance 的推荐&#xff0c;目标是自己实现一下user-based recommendation。原博客中的…

NLP实验案例100个(6-10)

实验六 数据类型 一、实验目的及要求 熟悉数据的数据类型二、实验设备&#xff08;环境&#xff09;及要求 开发环境&#xff1a;jupyter notebook 开发语言以及相关的库&#xff1a;python开发语言 numpy库 三、实验内容与步骤 1.创建一个array类型的数据&#xff0c;设置…

【ShaderToy中图形效果转译到UnityShaderlab案例分享,纯代码实现卡通心跳_Pattern】

Shader"ShaderToy/Pattern" {Properties{_MainTex("_MainTex", 2D) = "white"{}}SubShader{Pass{CGPROGRAM

性能如何通过分析后台资源确定瓶颈之CPU内存

确定瓶颈之CPU、内存 影响性能的因素 CPU 内存 网络 硬件 i/o 中间件 应用服务器 数据库 家门口的路比较拥堵&#xff1a;解决方案---多来几条路/加宽路/修地铁/修个桥、修整路面、找交警指挥交通/红绿灯、限行、分散周围居民、收费、其他路段的问题 CPU--中央处理器--…

使用go与智能合约交互之函数选择器调用

go与智能合约交互的方式有很多种&#xff0c;其中一种方式可以在不知道合约源码的情况下进行调用&#xff0c;接下来让我们一起学习一下。 1、首先我们安装一下go-ethereum go get -u github.com/ethereum/go-ethereum2、新建main.go文件&#xff0c;添加依赖 import ("…

KEIL 软件学习魔法棒

Device 芯片选型 Target : 晶振设置 Output: 选择中间文件的生成路径 Objects (创建文件夹之后再选择) &#xff0c;创建hex文件 Listing : 创建文件夹之后再选择 USER&#xff1a;改变生成的 hex 文件路径 C/C &#xff1a;宏定义 和 路径选择 &#xff08;目前使用到的&#…

压力测试-商场项目

1.压力测试 压力测试是给软件不断加压&#xff0c;强制其在极限的情况下运行&#xff0c;观察它可以运行到何种程度&#xff0c;从而发现性能缺陷&#xff0c;是通过搭建与实际环境相似的测试环境&#xff0c;通过测试程序在同一时间内或某一段时间内&#xff0c;向系统发送预…

陪诊小程序软件|陪诊系统定制|医院陪诊小程序

开发一个陪诊小程序需要投入一定的费用&#xff0c;具体金额会因项目的复杂程度、功能需求和推广政策而有所差异在投入资金之前&#xff0c;建议进行市场调研和需求分析&#xff0c;制定出合理的预算&#xff0c;并选择专业的开发团队进行合作&#xff0c;那么开发陪诊小程序需…

KingFunsion工程开发规范——关系库使用规范

KingFunsion工程开发规范——关系库使用规范 2023-07-07 20:10雷工笔记 哈喽&#xff0c;大家好&#xff0c;我是雷工。 今天学习KingFunsion工程开发规范之关系库使用规范。 第一章 统一规范 1.1.表字符集默认使用utf8&#xff1b; 1.2.禁止在数据库中存储大文件&#xff0…

新的CoolSiC™槽沟MOSFET技术,用于低栅氧化物应力和高性能

标题&#xff1a;The new CoolSiC™ Trench MOSFET Technology for Low Gate Oxide Stress and High Performance UPS&#xff08;Uninterruptible Power Supply&#xff09;系统也称不间断电源系统&#xff0c;是一种能够提供电力备用的设备&#xff0c;当主电源出现故障或停…

无涯教程-jQuery - jQuery.post( url, data, callback, type)方法函数

jQuery.post(url&#xff0c;[data]&#xff0c;[callback]&#xff0c;[type])方法使用POST HTTP请求从服务器加载页面。 该方法返回XMLHttpRequest对象。 jQuery.post( url, [data], [callback], [type] ) - 语法 $.post( url, [data], [callback], [type] ) 这是此方法使…

3秒钟教你如何配置vscode中的vue3代码快速生成模版

1.首先点击你的vscode左下角的齿轮设置按钮&#xff0c;然后点击配置用户代码片段。 2.输入vue搜索vue.json这个文件&#xff0c;然后点击这个文件 3.接下来只需在原有的注释之下输入粘贴如下代码即可 代码如下&#xff1a; "vue3": {"prefix": "vue3…

前后端分离开发,使用Nginx部署Vue

nginx相关的命令&#xff08;要在nginx报下打开cmd执行相应的命令&#xff09; 开启nginx&#xff1a;start nginx 关闭nginx&#xff1a;nginx.exe -s quit 怎么把现有的前端环境部署在nginx上 安装并配置好Nginx后&#xff0c;您可以通过以下步骤来访问项目的前端页面&#…