构建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.mzph.cn/news/20326.shtml

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

相关文章

【Linux】进程间通信——管道

目录 写在前面的话 什么是进程间通信 为什么要进行进程间通信 进程间通信的本质理解 进程间通信的方式 管道 System V IPC POSIX IPC 管道 什么是管道 匿名管道 什么是匿名管道 匿名管道通信的原理 pipe()的使用 匿名管道通信的特点 拓展代码 命名管道 什么是命…

IDEA离线环境搭建远程开发-Windows

公司的云桌面实在太卡,多个微服务项目跑起来,直接无法进行其它编码工作,所以想到使用Idea提供的远程开发功能,将服务运行在服务器,电脑只提供给开发页面展示,提高效率。 环境介绍: 开发环境&…

SystemVerilog数组参数传递及引用方法总结

一、将常数数组传递给task/function 如下面的程序,将一个常数数组传递给function module my_array_test();function array_test(int array[4]);foreach(array[i]) begin$display("array[%0d] %0d", i, array[i]);endendfunctioninitial beginarray_tes…

景联文科技高质量成品数据集上新啦!

景联文科技近期上新多个成品数据集,包含图像、视频等多种类型的数据,涵盖丰富的场景,可满足不同模型的多元化需求。 高质量成品数据集可用于训练和优化模型,使得模型能够更加全面和精准地理解和处理任务,更好地应对复…

anaconda创建虚拟环境在D盘

【看一看就行,又是挺水的一期(每一季都掺和一点子水分也挺好)】 一、创建: conda create --prefixD:\python37\py37 python3.7 这下就在D盘了: 二、激活刚刚那个环境: activate D:\pyhton37\py37​ &…

python sqllite基本操作

以下是一些基本的SQLite3操作: 连接到数据库:使用sqlite3.connect()函数连接到数据库,返回一个Connection对象,我们就是通过这个对象与数据库进行交互。例如: import sqlite3 conn sqlite3.connect(example.db)创建…

​LeetCode解法汇总722. 删除注释

目录链接: 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目: https://github.com/September26/java-algorithms 原题链接:力扣 描述: 给一个 C 程序,删除程序中的注释。这个程序source是一个数组&#x…

如何微调医疗大模型llm:llama2学习笔记

三个微调方向:简单医疗问答 临床问答 影像学 一般流程: 1 数据集准备 2 模型基座选择 3 微调 4 案例拆解 1 数据集准备:两种类型,一种文本一种影像 扩展,多模态 2 模型基座选择 多模态处理所有视频,文本…

连接 MySQL

文章目录 1.连接本地 MySQL2.连接远程 MySQL3.退出 MySQL4.查看 MySQL 版本 1.连接本地 MySQL 首先打开 Shell 命令终端或命令行程序,键入命令mysql -u root -p,回车后提示输入密码。注意用户名和密码与命令选项之间的空格可有可无。 mysql -u USER_NA…

【汇总】解决Ajax请求后端接口,返回ModelAndView页面不跳转

【汇总】解决Ajax请求后端接口,返回ModelAndView不跳转 问题发现问题解决方法一:直接跳转到指定URL(推荐)方法二:将返回的html内容,插入到页面某个元素中方法三:操作文档流方法四:使…

leetcode做题笔记51

按照国际象棋的规则,皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上,并且使皇后彼此之间不能相互攻击。 给你一个整数 n ,返回所有不同的 n 皇后问题 的解决方案。 每一种…

redis的安装和配置

一、nosql 二、redis的安装和配置 redis的安装: redis常见配置: 配置文件redis.conf

F-小富的idea(2023河南萌新联赛第(四)场:河南大学)

卷王小富最近又在内卷,并且学了一门新的技能:书法,但是不幸的是在国庆节的书法大赛上,小富不小心打翻了墨水瓶,导致很多墨滴溅在了他的书法纸上,看着墨水不断扩散,浸透了他的书法纸,…

Go重写Redis中间件 - Go实现内存数据库

GO实现内存数据库 前面我们实现了一个简单的回发Redis,这里我们要实现一个真正的Redis内核 实现底层Dict数据结构 新建一个datastruct文件夹,放一些我们要用的数据结构,比如Redis的核心起始就是一个map,再新建一个包实现这个map或者叫字典,字典的底层使用的就是map di…

【FAQ】调用EasyDSS返回的直播快照接口,无法编辑只能新建的原因排查与解决

EasyDSS视频直播点播平台集视频直播、点播、转码、管理、录像、检索、时移回看等功能于一体,可提供音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务,在应用场景上,平台可以运用在互联网教育、在线课堂、游戏直播等领域…

【H5移动端】常用的移动端方案合集-键盘呼起、全面屏适配、图片大小显示、300ms点击延迟、首屏优化(不定期补充~)

文章目录 前言键盘呼起问题靠近底部的输入项被键盘遮挡底部按钮被顶上去 全面屏适配图片大小显示问题解决300ms延迟首屏优化 前言 这篇文章总结了我在工作中做H5遇到的一些问题,包括我是怎么解决的。可能不是当下的最优解,但是能保证解决问题。 单位适…

智慧防汛,数字科技的力量

随着夏日的脚步临近,台风季节即将降临。对于那些居住在沿海地区的人们来说,台风是一种常见的自然灾害,其带来的风雨可能对生命和财产造成严重威胁。然而,随着数字科技的飞速发展,可视化技术为防汛抗台工作带来了全新的…

【C++】STL——queue的介绍和使用、queue的push和pop函数介绍和使用、queue的其他成员函数

文章目录 1.queue的介绍2.queue的使用2.1queue构造函数2.2queue的成员函数(1)empty() 检测队列是否为空,是返回true,否则返回false(2)size() 返回队列中有效元素的个数 (3)front() 返…

在使用Python爬虫时遇到解析错误解决办法汇总

在进行Python爬虫任务时,遇到解析错误是常见的问题之一。解析错误可能是由于网页结构变化、编码问题、XPath选择器错误等原因导致的。为了帮助您解决这个问题,本文将提供一些实用的解决办法,并给出相关的代码示例,希望对您的爬虫任…

无涯教程-Lua - Modules(模块)

模块就像可以使用 require 加载的库,并且具有包含Table的单个全局名称,该模块可以包含许多函数和变量。 Lua 模块 其中一些模块示例如下。 -- Assuming we have a module printFormatter -- Also printFormatter has a funtion simpleFormat(arg) -- …