vue项目打包部署到服务器并使用cdn加速

  • 配置 vue.config.js文件
const isProd = process.env.NODE_ENV === 'production'
module.exports = {// 其他配置chainWebpack: config => {// 生产环境下使用CDNif (isProd) {config.plugin('html').tap(args => {args[0].cdn = assetsCDNreturn args})}},// 生产环境下替换路径为cdn路径publicPath: isProd ? process.env.VUE_APP_PUBLIC_PATH_PROD : process.env.VUE_APP_PUBLIC_PATH,
}
// .env 文件变量
VUE_APP_PUBLIC_PATH=/
// cdn存储路径
VUE_APP_PUBLIC_PATH_PROD=https://jz-pro-server.oss-cn-hangzhou.aliyuncs.com/cdn/a_项目名称

在这里插入图片描述
在这里插入图片描述

  • a_项目名称存储的内容为打包的dist文件内容
  • 将打包好的dist文件上传到服务器对应目录,
  • 后续只需要将打包好的本地dist文件中的index.html文件更新至服务器中的index.html文件

并且全量替换cdn中的dist文件内容
在这里插入图片描述

  • 打包的dist文件里 index.html文件内容
    在这里插入图片描述

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

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

相关文章

【Druid 登陆异常】

Druid 登陆异常 问题描述:页面登陆将请求参数放到请求体中导致无法通过request.getParameter 方式 服务加载流程 通过 DruidStatViewServletConfiguration 中方法 statViewServletRegistrationBean 初始化StatViewServlet 通过 com.alibaba.druid.support.jakarta…

【Android】在WSA安卓子系统中进行新实验性功能试用与抓包(2311.4.5.0)

前言 在根据几篇22和23的WSA抓包文章进行尝试时遇到了问题,同时发现新版Wsa的一些实验性功能能优化抓包配置时的一些步骤,因而写下此篇以作记录。 Wsa版本:2311.40000.5.0 本文出现的项目: MagiskOnWSALocal MagiskTrustUserCer…

Ultraleap 3Di示例Interactable Objects组件分析

该示例代码位置如下: 分析如下: Hover Enabled:悬停功能,手放在这个模型上,会触发我们手放在这个模型上的悬停功能。此时当手靠近模型的时候,手的模型的颜色会发生改变,反之,则不会…

Java服务端使用freemarker+wkhtmltoimage生成Echart图片

目录 1.通过 freemarker 将ftl转成html 1.1 freemarker 手册: 1.2 添加freemarker maven依赖 1.3 添加 echart-test.ftl 模版文件 1.4 添加 FreemarkerTool 工具类 1.5 添加测试main方法 1.6 运行,生成echart-test-时间戳.html 文件 2. 通过wkhtmltoimage将html 转为p…

数位dp,HDU 4151 The Special Number

一、题目 1、题目描述 In this problem, we assume the positive integer with the following properties are called ‘the special number’: 1) The special number is a non-negative integer without any leading zero. 2) The numbers in every digit of the special nu…

763. 划分字母区间 - 力扣(LeetCode)

题目描述 给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段,同一字母最多出现在一个片段中。 注意,划分结果需要满足:将所有划分结果按顺序连接,得到的字符串仍然是 s 。 返回一个表示每个字符串片段的长度的列表。…

股票交易维度和概念

股票:股份公司为筹集资金而发行给各个股东作为持股凭证并借以取得股息和红利的一种有价证券 好处:分红、送股配股、交易收益、本金少、易变现、避免货币贬值 金融标的投资风险与收益 股票分类 蓝筹股 经营业绩长期稳定增长的大公司,一般是…

IaC基础设施即代码:Terraform 连接 azure Blob 实现多资源管理

目录 一、实验 1.环境 2.Terraform 连接 azure Blob 3.申请虚拟网络资源 4.申请子网资源 5.申请安全组资源 6.申请公网IP与网络接口资源 7.申请虚拟机资源 8.申请负载均衡器 9.销毁资源 二、问题 1.存储无法删除 一、实验 1.环境 (1)主机 表…

【mongoDB】文档 CRUD

目录 1.插入文档 批量插入: 2.查询文档 3.更新文档 4.删除文档 deleteOne() deleteMany() findOneAndDelete() 1.插入文档 可以使用 insert () 方法或者 save() 方法向集合中插入文档 语法如下: db.collection_name.insert(document) collectio…

6.2第三次作业

综合练习:请给openlab搭建web网站 网站需求: 1.基于域名www.openlab.com可以访问网站内容为welcome to openlab!!! 2.给该公司创建三个子界面分别显示学生信息,教学资料 和缴费网站,基于,www.openlab.com/data网站…

sql管理工具archery简介

在平时的工作过程中,我们肯定会遇到使用sql平台的场景,业内也有很多工具,类似阿里云的dms,但是这个是和云厂商绑定的,我们可能一般没有用到阿里云组件就比较困难了,那还有什么选项了,经过调研&a…

leetcode常见错误

2024年1月26日 Line 1037: Char 34: runtime error: addition of unsigned offset to 0x503000000070 overflowed to 0x50300000006c (stl_vector.h) SUMMARY: UndefinedBehaviorSanitizer: undefined-behavior /usr/bin/../lib/gcc/x86_64-linux-gnu/11/../../../../include/c…

redis主从复制薪火相传

一.主从复制 1、是什么 主机数据更新后根据配置和策略, 自动同步到备机的master/slaver机制,Master以写为主,Slave以读为主 2、能干嘛 读写分离,性能扩展(主 写 从 读) 容…

yolov5转onnx到ncnn

测试代码6.2 检测这一套都没啥说的主要在onnx转ncnn这步 python export.py --data data/xuehua.yaml --weights runs/train/exp4/weights/best.pt --trainpython -m onnxsim runs/train/exp4/weights/best.onnx runs\train\exp4\weights\best-sim.onnx(这步重要),如…

Python学习从0到1 day9 Python函数

苦难是花开的伏笔 ——24.1.25 函数 1.定义 函数:是组织好的,可重复使用的,用来实现特定功能的代码段 2.案例 在pycharm中完成一个案例需求:不使用内置函数len(),完成字符串长度的计算 #统计字…

伊恩·斯图尔特《改变世界的17个方程》薛定谔方程笔记

想法是等这学期学到薛定谔方程后再把整份完善下。 它告诉我们什么? 这个方程不是把物质作为粒子,而是作为波,并描述这样的波如何传播。 为什么重要? 薛定谔方程是量子力学的基础,它与广义相对论一起构成了当今最有效的…

NGINX如何实现rtmp推流服务

最近直播大火,直播推流软件遍地开花,那么用NGINX如何进行推流呢?下面我们就简单的介绍一下用NGINX的rtmp模块如何实现视频推流,我们主要从一下几点介绍: 推流拉流推流认证拉流认证 package mainimport ("fmt&qu…

Vue 3.0中Treeshaking特性(详细解析)

文章目录 一、是什么二、如何做Vue2 项目Vue3 项目 三、作用参考文献 一、是什么 Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,专业术语叫 Dead code elimination 简单来讲,就是在保持代码运行结果不变的前提下,去除…

day05-盒子模型

01-选择器 结构伪类选择器 基本使用 作用:根据元素的结构关系查找元素。 li:first-child {background-color: green; } :nth-child(公式) 提示:公式中的n取值从 0 开始。 伪元素选择器 作用:创建虚拟元素(伪元素)…

vue项目中如何使用SVG图标

IconFont使用的不足:图标添加、修改、删除以后在线链接需要更新离线资源需要重新下载项目代码需要同步更新。 在项目不断更新和迭代的过程中,图标的增减变化还没有稳定的情况下,开发人员的工作效率会明显下降。 那么有没有一个图标应用方式…