构建vue项目配置和环境配置

目录

    • 1、环境变量process.env配置
    • 2、vue package.json多环境配置
      • vue-cli-service serve其他用法
      • vue-cli-service build其他用法
      • vue-cli-service inspect其他用法
    • 3、vue导出webpack配置
    • 4、配置打包压缩图片文件
    • 5、打包去掉多余css(由于依赖问题暂时未实现)
    • 6、打包去除console.log
    • 7、对打包的静态文件进行压缩
    • 8、vue.config.js

1、环境变量process.env配置

vue-cli中

注意:变量名必须以 VUE_APP_ 开头,这样才能在项目中被识别为环境变量。

新建文件.env.development

VUE_APP_API_URL=http://api.example.com
VUE_APP_ENV=development

新建文件.env.production

VUE_APP_API_URL=http://api.example.com
VUE_APP_ENV=production

vue中获取环境变量

console.log(process.env, 'process.env');

在这里插入图片描述

vite中
新建文件.env.development

NODE_ENV="development"
VITE_BASE_URL="http://127.0.0.0:8080"

新建文件.env.production

NODE_ENV="production"
VITE_BASE_URL="http://127.0.0.0:8080"

vite中获取环境变量

console.log(import.meta.env, 'process.env');

在这里插入图片描述

2、vue package.json多环境配置

  "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint",//新增development环境,相当于serve"serve:dev": "vue-cli-service serve --mode development",//新增production环境"serve:prod": "vue-cli-service serve --mode production"},

如果你可以使用 npx (最新版的 npm 应该已经自带),也可以直接这样调用命令:

npx vue-cli-service serve

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)举例:"scripts": {"serve": "vue-cli-service serve  --open","serve:dev": "vue-cli-service serve --mode development --open",},

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

除了通过命令行参数,你也可以使用 vue.config.js 里的 devServer 字段配置开发服务器。

命令行参数 [entry] 将被指定为唯一入口 (默认值:src/main.js,TypeScript 项目则为 src/main.ts),而非额外的追加入口。尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误。

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 

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

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

相关文章

SW - 装配图用的组合零件的制作步骤

文章目录 SW - 装配图用的组合零件的制作步骤概述笔记END SW - 装配图用的组合零件的制作步骤 概述 一套相关零件做好后, 需要做装配体, 将零件都装上, 看看是否有纰漏. 如果不做总装图, 真不放心. 万一废了, 耽误的时间大把的. 做总装图的时间比做零件的2个星期比起来, 代价…

打印Winform控件实现简陋版的分页打印(C#)

本文的代码可以从这里获取:winformDemo.rar 张祥裕/分享的资源名称 - Gitee.com 作者的水平有限,如有错误,望指正。 为了简单起见,纸张大小,打印机等信息按照默认的来,本文的实现方案是:打印Pa…

使用正则表达式 移除 HTML 标签后得到字符串

需求分析 后台返回的数据是 这样式的 需要讲html 标签替换 high_light_text: "<span stylecolor:red>OPPO</span> <span stylecolor:red>OPPO</span> 白色 01"使用正则表达式 function stripHTMLTags(htmlString) {return htmlString.rep…

vue中各种混淆用法汇总

✨在生成、导出、导入、使用 Vue 组件的时候&#xff0c;像我这种新手就会常常被位于不同文件的 new Vue() 、 export default{} 搞得晕头转向。本文对常见用法汇总区分 new Vue() &#x1f4a6;Vue()就是一个构造函数&#xff0c;new Vue()是创建一个 vue 实例。该实例是一个…

阿里云ssl免费数字证书快过期 如何更换

1.登陆阿里云 找到ssl 查看快过期的证书 数字证书管理服务-ssl证书 2.创建免费的证书&#xff0c;对应过期证书的域名 3.下载新证书 pem key放在本地 此处记录本地的下载路径 /Users/dorsey/Downloads/10791167_lzzabc.cn_nginx/lzzabc.cn.pem /Users/dorsey/Downloads/1…

初阶数据结构——二叉树题目

文章目录 一、单值二叉树二、检查两颗树是否相同三、另一棵树的子树四、二叉树的前序遍历五、对称二叉树 一、单值二叉树 单值二叉树 如果二叉树每个节点都具有相同的值&#xff0c;那么该二叉树就是单值二叉树。只有给定的树是单值二叉树时&#xff0c;才返回 true&#xff…

Mapping温度分布验证选择数据记录仪时需要考虑的13件事

01 什么是温度分布验证&#xff1f; 温度分布验证是通过在规定的研究时间内测量定义区域内的多个点来确定特定温度控制环境或过程&#xff08;如冷冻柜、冰箱、培养箱、稳定室、仓库或高压灭菌器&#xff09;的温度分布的过程。温度分布验证的目标是确定每个测量点之间的差异&…

1.netty介绍

1.介绍 是JBOSS通过的java开源框架是异步的,基于事件驱动(点击一个按钮调用某个函数)的网络应用框架,高性能高可靠的网络IO程序基于TCP,面向客户端高并发应用/点对点大量数据持续传输的应用是NIO框架 (IO的一层层封装) TCP/IP->javaIO和网络编程–>NIO—>Netty 2.应用…

FFmepg视频解码

1 前言 上一篇文章<FFmpeg下载安装及Windows开发环境设置>介绍了FFmpeg的下载安装及环境配置&#xff0c;本文介绍最简单的FFmpeg视频解码示例。 2 视频解码过程 本文只讨论视频解码。 FFmpeg视频解码的过程比较简单&#xff0c;实际就4步&#xff1a; 打开媒体流获取…

Redis-1

Redis 理论部分 redis 速度快的原因 1、纯内存操作 2、单线程操作&#xff0c;避免了频繁的上下文切换和资源争用问题&#xff0c;多线程需要占用更多的 CPU 资源 3、采用了非阻塞 I/O 多路复用机制 4、提供了非常高效的数据结构&#xff0c;例如双向链表、压缩页表和跳跃…

idea模块的pom.xml被划横线,不识别的解决办法

目录 问题&#xff1a; 解决办法&#xff1a; 1.打开设置 2. 取消勾选 3.点击确认 4.解决 问题提出&#xff1a; 写shi山的过程中&#xff0c;给模块取错名字了&#xff0c;改名的时候不知道点到了什么&#xff0c;一个模块的pom.xml变成灰色了&#xff0…

【Spring Cloud 四】Ribbon负载均衡

Ribbon负载均衡 系列文章目录背景一、什么是Ribbon二、为什么要有Ribbon三、使用Ribbon进行负载均衡服务提供者A代码pom文件yml配置文件启动类controller 服务提供者Bpom文件yml配置文件启动类controller 服务消费者pom文件yml文件启动类controller 运行测试 四、Ribbon的负载均…

Vue没有node_modules怎么办

npm install 一下 然后再npm run serve 就可以运行了

isp调试工具环境搭建及其介绍!

一、isp调试环境搭建&#xff1a; 后期调试isp&#xff0c;是在rv1126提供的RKISP2.x Tuner工具上进行调试&#xff0c;所以我们大前提必须要把这个环境和一些操作先搞熟悉来&#xff0c;后面有一些专用术语&#xff0c;我们遇到了再去看&#xff0c;现在专门看一些专用术语&am…

冠达管理:光伏巨头大反弹!业绩环比提升+低市盈率+超跌股仅14只

今年以来&#xff0c;部分公司得益于职业景气量提高、上游成本下滑、财物处置等原因&#xff0c;连续两个季度净利润继续改进。 光伏巨子成绩环比大幅增加&#xff0c;股价底部大涨 8月3日&#xff0c;光伏龙头隆基绿能股价大涨6.05%&#xff0c;全天成交额到达89.85亿元&…

Stable Diffusion AI绘画初学者指南【概述、云端环境搭建】

概述、云端环境搭建 Stable Diffusion 是什么、能干啥&#xff1f; 是一种基于深度学习的图像处理技术&#xff0c;可以生成高质量的图像。它可以在不需要真实图像的情况下&#xff0c;通过文字描述来生成逼真的图像。 可以对图像进行修复、超分辨率转换&#xff0c;将低分辨…

【BASH】回顾与知识点梳理(一)

【BASH】回顾与知识点梳理 一 前言一. 认识与学习 BASH1.1 硬件、核心与 Shell1.2 为何要学文字接口的 shell&#xff1f;1.3 系统的合法 shell 与 /etc/shells 功能1.4 Bash shell 的功能1.5 查询指令是否为 Bash shell 的内建命令&#xff1a; type1.6 指令的下达与快速编辑按…

[openCV]基于拟合中线的智能车巡线方案V4V5

V4: import cv2 as cv import os import numpy as npimport time# 遍历文件夹函数 def getFileList(dir, Filelist, extNone):"""获取文件夹及其子文件夹中文件列表输入 dir&#xff1a;文件夹根目录输入 ext: 扩展名返回&#xff1a; 文件路径列表""…

Cpp9 — map和set

map和set STL分为序列式容器&#xff08;vector、list、deque&#xff09;和关联式容器&#xff08;map、set&#xff09; 序列式容器&#xff1a;数据与数据之间没有很强的联系。&#xff08;各个数据之间没什么关联&#xff09;。底层为线性序列的数据结构&#xff0c;里面…

C语言每日一题:13《数据结构》环形链表。

题目链接&#xff1a; 一.环形链表运动基础。 使用快慢指针利用相对移动的思想&#xff1a; 1.第一种情况&#xff1a; 1,令快指针&#xff08;fast&#xff09;速度为2. 2.慢指针&#xff08;slow&#xff09;速度为1. 3.以慢指针进入环中开始。 4。假设slow刚刚进入环中fast…