nginx服务器执行的过程

一:打包

1.打包前的分析

文件路径下+npm run preview -- --report

生成打包之后的内容

2.解决有些内容体积过大的问题

1.删除有些不使用但是占用较多的,将main.js上import删除,打包时不会有

2.不能删除但是内容较大的

vue.config.js文件夹下

 externals: {
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'cos-js-sdk-v5': 'COS'
    }
可以即使有import也不去导入,而且对于之前导入的部分当运行时查找Vue全局变量

 <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js" ></script>

script不会被打包,但是等运行会执行导入,上述的外部也会查找导入的全局变量,进行操作.因此打包体积缩小,但是运行查找cdn的文件,导入,一样的.内存里仍然有.

 <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">
打包不导入,但是放到这里,执行的时候运行导入index.html下

二:打包

进行前述打包分析,对大的文件进行处理之后,我们就进行打包

三:服务器内运行访问

1.mac电脑

1)下载nginx服务器

安装nginx

brew install nginx  

查看版本

brew info nginx #查看nginx

2)将生成的dist下的文件复制拷贝到html文件夹下

3)开启服务器

服务器安装但是默认是关闭的,只有开启,才能在网站内找到,执行

brew info nginx #查看nginx
查看地址  

/opt/homebrew/Cellar/nginx/1.23.3/bin/nginx #启动命令

 /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx -s stop  #停止命令

可以在任意路径下执行

务器需要知道静态文件所在的目录,以便能够正确地响应客户端的请求。之后放也不会有地址.

4)访问

 1.使用hisory模式

     

使得网站地址是不带#,地址变化重新刷新.#仍能访问到.反之不可,#用来分辨那个是那一部分.history会忽视#.

2)访问的时候,http://域名+8080端口名(固定)+地址.

http://localhost/8080/#/login原本会根据路由来访问对应的.

但是打包之后默认后面的是html文件,访问服务器下login.html文件,再根据地址访问路由对应的内容.

mac-配置文件路-/opt/homebrew/etc/nginx/nginx.conf 

$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx -s reload  #重启
不重启,服务器访问不会有效

2.window电脑

1)下载nginx服务器

  1. 打开 Nginx 的官方网站:https://nginx.org/。
  2. 在网站的首页上方,你会看到一个下载按钮。点击该按钮将会跳转到下载页面。
  3. 在下载页面中,你会看到列出了不同版本的 Nginx。找到适合你的 Windows 系统的稳定版本。
  4. 在 Windows 系统下,你可以选择下载预编译的二进制文件。根据你的系统架构(32位或64位),选择相应的版本进行下载。
  5. 点击下载链接,将会开始下载 Nginx 的压缩文件(通常是一个 zip 文件)。
  6. 下载完成后,解压缩压缩文件到你想要安装 Nginx 的目录。

2)将生成的dist下的文件复制拷贝到html文件夹下

3)启动服务器

点击.exe文件即可启动

找到下载的文件夹的路径执行$./nginx -s stop  #停止命令

4)使得只指向一个index.html文件和mac一样

但是都需要重启

$ ./nginx -s reload  #重启
四:生产环境跨越

只要修改了配置文件就需要重启否则无效的.

这里会使得生产模式和开发模式的地址不同.

在下面的配置当中使得访问服务器.

```bash
location /prod-api  {
  proxy_pass https://heimahr-t.itheima.net;(需要加分号,需要请求的地址)
}
 

上述实现请求.

重启是在nginx文件夹下

二:vuex仓库

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

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

相关文章

Jenkins动态slave

目录 所需环境 安装nfs 部署Jenkins 安装插件 ​编辑添加凭据 配置动态slave 连接kubernetes集群 ​编辑配置Jenkins地址 ​编辑配置Pod模板 ​编辑确认代理端口 创建任务测试 在当今软件开发生命周期中&#xff0c;持续集成/持续部署&#xff08;CI/CD&#xff09;已…

Selenium 异常类详解

在使用 Selenium 进行 Web 自动化测试时&#xff0c;经常会遇到各种异常情况。了解这些异常并掌握如何处理它们对于编写稳定可靠的测试脚本至关重要。本文将详细介绍 Selenium 中常见和不常见的异常类及其使用场景。 Selenium 常见异常类列表 序号异常类基类描述1selenium.co…

告别死记硬背!这一AI学习法让你和别人的差距越拉越大

文章目录 一、初步提问二、需求分析三、提示词初步设计四、提示词迭代五、需求扩展 今天我要分享的是如何利用GPT来辅助学习和理解各种繁琐、复杂、抽象的教材内容或者冗长的片段。 今天将以《操作系统教程》中的内存管理章节为例进行讲解。 本次采用的大模型是通义千问2.5&am…

STM32---蓝牙模块ECB02(从机模式_与手机通信)

目录 1、ECB02 重点 参数 2、引脚说明 3、AT指令使用重点 4、使用USB转TTL模块测试 5、STM32开发板的接线 6、STM32通信代码 7、手机小程序 连接ECB02 1、ECB02 重点 参数 蓝牙协议&#xff1a; 5.2主从模式&#xff1a;主、从一体&#xff0c;可设置睡眠模式&#xff…

职业规划与指导

文章目录 职业规划与指导2024心得2405架构师的必经之路 职业规划与指导2024 心得 但凡工作中&#xff0c;能够搞明白的就在工作中把原理使用等等搞明白&#xff0c;但凡工作中搞不明白的&#xff0c;业余也不用花时间在去搞明白&#xff0c;因为工作中都搞不明白的事&#xf…

mac远程桌面连接工具:Microsoft Remote Desktop正式版

Microsoft Remote Desktop 是一款由微软开发的远程桌面控制软件。它允许用户通过互联网连接到远程计算机&#xff0c;从而可以在本地计算机上访问和控制远程计算机的桌面、文件和应用程序。 下载地址&#xff1a;https://www.macz.com/mac/1004.html?idOTI2NjQ5Jl8mMjcuMTg2Lj…

x264 码率控制 MBtree 原理:mbtree_propagate_list 函数分析

mbtree_propagate_list 函数功能 是视频编码中宏块树传播算法的一部分,用于在编码决策过程中更新参考帧的传播成本。这个过程特别关注于如何处理运动向量(Motion Vectors, MVs)以及如何根据这些MVs对参考帧的成本进行加权,从而影响最终的编码选择。 该函数作为x264编码器…

深入理解Linux系统管理与网络配置高级指南

深入理解Linux系统管理与网络配置高级指南 目录 深入理解Linux系统管理与网络配置高级指南 一、Linux文件系统管理 二、Linux进程管理 三、Linux系统管理 四、Linux网络管理 五、Linux磁盘管理 一、Linux文件系统管理 1.1 文件和目录操作 在Linux中&#xff0c;一切皆…

React 组件三大核心之 ref

文章目录 用法React.createRef()useRef Hook 注意 ref 是 React 中的一个重要概念&#xff0c;它用于访问和操作 DOM 元素或者类组件实例。 在React中&#xff0c;ref 提供了一种方式&#xff0c;允许我们访问DOM节点或在render方法中创建的React元素。这对于执行DOM操作、读取…

Servlet的request对象

request对象的继承关系 1.HttpServletRequest接口继承了ServletRequest接口&#xff0c;对其父接口进行了扩展&#xff0c;可以处理满足所有http协议的请求 2.HttpServletRequest和ServletRequest都是接口&#xff0c;不能创建对象&#xff0c;因此在tomcat底层定义实现类并创…

modbus开源库libmodbus的C语言使用记录(实现简单的modbus主机/丛机程序,解决libmodbus库安装出现的问题)

libmodbus简介 libmodbus 是一个开源的、跨平台的C库,用于实现Modbus通讯协议。它支持Modbus RTU(RS-232/485)和Modbus TCP协议,可以使开发者方便地在项目中集成Modbus通讯功能。libmodbus的设计目标是简单、灵活和高效,适用于各种大小的嵌入式和桌面应用。 编译运行测试…

filter is not a function

"filter is not a function" 这个错误通常意味着你尝试在一个不支持 .filter() 方法的对象上调用这个方法。在JavaScript中&#xff0c;.filter() 是一个数组&#xff08;Array&#xff09;的内置方法&#xff0c;用于创建一个新数组&#xff0c;其包含通过所提供函数…

ffpmeg windows WSl 编译so

1.NDK 环境变量配置 2.git clone ffpmeg 3.创建脚本&#xff08;需先下载gcc编译器&#xff09; 64位脚本如下 #!/bin/bashexport NDK/home/test/ndk20 #这里配置先你的 NDK 路径 TOOLCHAIN$NDK/toolchains/llvm/prebuilt/linux-x86_64function build_android {./configure \ …

鸿蒙ArkUI-X跨平台技术:【SDK结构介绍】

ArkUI-X SDK目录结构介绍 简介 本文档配套ArkUI-X&#xff0c;将OpenHarmony ArkUI开发框架扩展到不同的OS平台&#xff0c;比如Android和iOS平台&#xff0c;让开发者基于ArkUI&#xff0c;可复用大部分的应用代码&#xff08;UI以及主要应用逻辑&#xff09;并可以部署到相…

Linux 磁盘管理命令 mdadm:RAID设置工具

文章目录 3.Linux 磁盘管理命令3.25 mdadm:RAID设置工具案例练习 3.Linux 磁盘管理命令 3.25 mdadm:RAID设置工具 作用&#xff1a;mdadm 是 Linux 下用于管理软件磁盘阵列的工具。 用法&#xff1a;mdadm [模式] [设备] [选项] 模式有如下 7 种: Create&#xff1a;使用空闲…

05-Vue路由

05-Vue路由 前言vue路由介绍配置路由信息vue实例使用vue路由router-link <router-link> Propstoreplaceappendtagactive-classexacteventexact-active-classaria-current-valuerouter-view <router-view> Propsname 前言 我们接着上一篇文章 04-Vue&#xff1a;ref…

RedHat9 | 配置转发DNS服务器

一、实验环境 1、介绍 转发服务器&#xff08;Forwarding Server&#xff09;接收查询请求&#xff0c;但不直接提供DNS解析&#xff0c;而是将所有查询请求发送到另外的DNS服务器&#xff0c;将查询的结果返回后保存到缓存中。如果没有指定转发服务器&#xff0c;DNS服务器会…

【Unity Shader入门精要 第8章】透明效果(二)

1. 透明度测试 透明度测试的原理是将片元的 Alpha 值与某个指定的阈值进行比较&#xff0c;当 Alpha 超过阈值时&#xff0c;该片元正常显示&#xff0c;若 Alpha 值低于指定的阈值&#xff0c;则将该片元丢弃。准确来讲&#xff0c;透明度测试并不是为了渲染一种半透的效果&a…

9 html综合案例-注册界面

9 综合案例-注册界面 一个只有html骨架的注册页面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>…

1255: 石子合并

时间限制: 1 Sec 内存限制: 128 MB 提交: 1456 解决: 779 [提交] [状态] [讨论版] [命题人:外部导入] 题目描述 现在有n堆石子&#xff0c;你每次可以挑任意两堆将其合并成一堆&#xff0c;代价是两堆石子的数量和。可知经过n-1次合并后只剩下一堆石子&#xff0c;现在要求总…