Vue项目打包部署到服务器

1. Vue项目打包部署到服务器

1.1. 配置

(1)修改package.json文件同级目录下的vue.config.js文件。

// vue.config.js
module.exports = {publicPath: './',
}

在这里插入图片描述
(2)检查router下的index.js文件下配置的mode模式。
  检查如果模式改为了history模式,打包后的页面为空,将其注释,使用默认的hash模式即可
在这里插入图片描述
(3)在README.md文件下点击npm run build 打包,或者在命令行输入。
在这里插入图片描述
在这里插入图片描述
(4)目录中多一个dist文件夹即为打包成功。
在这里插入图片描述

1.2. 测试

  测试一下,浏览器打开网址链接即可。
在这里插入图片描述

2. history模式部署

  默认情况下,Vue项目使用的是hash路由模式,就是URL中会包含一个#号的这种形式。#号以及之后的内容是路由地址的hash部分。正常情况下,当浏览器地址栏地址改变,浏览器会重新加载页面,而如果是hash部分修改的话,则不会,这就是前端路由的原理,允许根据不同的路由页面局部更新而不刷新整个页面。H5新增了history的pushState接口,也允许前端操作改变路由地址但是不触发页面刷新,history模式即利用这一接口来实现。因此使用history模式可以去掉路由中的#号。

2.1. 项目配置

  在vue-router路由选项中配置mode选项和base选项,mode配置为’history’;如果部署到非域名根目录,还需要配置base选项为前文配置的publicPath值(注意:此情况下,publicPath必须使用绝对路径/test的配置形式,而不能用相对路径./)
在这里插入图片描述

2.2. nginx配置

  对于history模式,假设项目部署到域名下的/test目录,访问http://xxx/test/about的时候,服务器会去找/test指向的目录下的about子目录或文件,很显然因为是单页面应用,并不会存在a这个目录或者文件,就会导致404错误:
在这里插入图片描述
  Vue项目部署后页面找不到
  我们要配置nginx让这种情况下,服务器能够返回单页应用的index.html,然后剩下的路由解析的事情就交给前端来完成即可。
在这里插入图片描述
  history模式nginx配置
  这句配置的意思就是,拿到一个地址,先根据地址尝试找对应文件,找不到再试探地址对应的文件夹,再找不到就返回/test/index.html。再次打开刚才的about地址,刷新页面也不会404啦:
在这里插入图片描述

3.3. history模式部署到非域名根路径下

  非域名根目录下部署,首先肯定要配置publicPath。需要注意的点前面其实已经提过了,就是这种情况下不能使用相对路径./或者空串配置publicPath。为什么呢?原因是它会导致router-link等的表现错乱,使用测试项目[2]分别使用两种配置打包发布,审查元素就能看出区别。在页面上有两个router-link,Home和About:
在这里插入图片描述

3.4. 两种配置打包后的结果如下。

(1)publicPath配置为./或者空串:
在这里插入图片描述
(2)publicPath配置为/test:
在这里插入图片描述
  publicPath配置为相对路径的router-link打包后地址变成了相对根域名下地址,很明显是错误的,所以非域名根路径部署应该将publicPath配置为完整的前缀路径。

3. Vue项目打包部署问题总结

3.1. 项目配置

  为了解决打包后资源路径不对的问题,需要在vue.config.js中配置publicPath,这里有两种配置方式,分别将publicPath配置为./和/test:

const {defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,// 部署生产环境和开发环境下的URL。// 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。publicPath: process.env.NODE_ENV === "production" ? "./" : "/",// publicPath:  "./",// 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)//outputDir: "dist",// 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)//assetsDir: "static",// 是否开启eslint保存检测,有效值:ture | false | 'error'//lintOnSave: process.env.NODE_ENV === "development",lintOnSave: false,
})

在这里插入图片描述

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

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

相关文章

【jpa】springboot使用jpa示例

目录 1. 请求示例2. pom依赖3. application.yaml4.controller5. service6. repository7. 实体8. 启动类 1. 请求示例 curl --location --request POST http://127.0.0.1:8080/user \ --header User-Agent: Apifox/1.0.0 (https://apifox.com) \ --header Content-Type: applic…

uniapp 常用的指令语句

uniapp 是一个使用 Vue.js 开发的跨平台应用框架,因此,它继承了 Vue.js 的大部分指令。以下是一些在 uniapp 中常用的 Vue 指令语句及其用途: v-if / v-else-if / v-else 条件渲染。v-if 有条件地渲染元素,v-else-if 和 v-else 用…

中企出海-德国会计准则和IFRS间的差异

根据提供的网页内容,德国的公认会计准则(HGB)与国际会计准则(IFRS)之间的主要差异可以从以下几个方面进行比较: 财务报告的目的: IFRS:财务报告主要是供投资者做决策使用&#xff0c…

NPU是什么?电脑NPU和CPU、GPU区别介绍

随着人工智能技术的飞速发展,计算机硬件架构也在不断演进以适应日益复杂的AI应用场景。其中,NPU(Neural Processing Unit,神经网络处理器)作为一种专为深度学习和神经网络运算设计的新型处理器,正逐渐崭露头…

使用skywalking,grafana实现从请求跟踪、 指标收集和日志记录的完整信息记录

Skywalking是由国内开源爱好者吴晟开源并提交到Apache孵化器的开源项目, 2017年12月SkyWalking成为Apache国内首个个人孵化项目, 2019年4月17日SkyWalking从Apache基金会的孵化器毕业成为顶级项目, 目前SkyWalking支持Java、 .Net、 Node.js、…

纯CSS实现文本或表格特效(连续滚动与首尾相连)

纯CSS实现文本连续向左滚动首尾相连 1.效果图&#xff1a; 2.实现代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, init…

【LeetCode刷题之路】622.设计循环队列

LeetCode刷题记录 &#x1f310; 我的博客主页&#xff1a;iiiiiankor&#x1f3af; 如果你觉得我的内容对你有帮助&#xff0c;不妨点个赞&#x1f44d;、留个评论✍&#xff0c;或者收藏⭐&#xff0c;让我们一起进步&#xff01;&#x1f4dd; 专栏系列&#xff1a;LeetCode…

Node.js基础入门

1.Node.js 简介 Node 是一个让 JavaScript (独立)运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。 简单的说 Node.js 就是运行在服务端的…

#思科模拟器通过服务配置保障无线网络安全Radius

演示拓扑图&#xff1a; 搭建拓扑时要注意&#xff1a; 只能连接它的Ethernet接口&#xff0c;不然会不通 MAC地址绑定 要求 &#xff1a;通过配置MAC地址过滤禁止非内部员工连接WiFi 打开无线路由器GUI界面&#xff0c;点开下图页面&#xff0c;配置路由器无线网络MAC地址过…

docker 部署kafka集群

docker run 部署 docker run -d --name zookeeper --restart always -p 2181:2181 wurstmeister/zookeeperdocker run -d --name kafka1 --restart always -p 9094:9092 \-e KAFKA_ADVERTISED_HOST_NAME182.54.14.45 \-e KAFKA_ZOOKEEPER_CONNECT182.54.14.45:2181 \-e KAFKA_…

Qt-chart 画折线图(以时间为x轴)

上图 代码 #include <iostream> #include <random> #include <qcategoryaxis.h>void MainWindow::testLine() {//1、创建图表视图QChartView* view new QChartView(this);//2.创建图表QChart* chart new QChart();//3.将图表设置给图表视图view->setCh…

C++多线程常用方法

在 C 中&#xff0c;线程相关功能主要通过头文件提供的类和函数来实现&#xff0c;以下是一些常用的线程接口方法和使用技巧&#xff1a; std::thread类 构造函数&#xff1a; 可以通过传入可调用对象&#xff08;如函数指针、函数对象、lambda 表达式等&#xff09;来创建一…

up主亲测,ToDesk/青椒云/顺网云这三款云电脑玩转AIGC场景

文章目录 1. 前言2. 云电脑性能分析3. 基础硬件数据3.1 硬件配置3.2 AI 评测跑分 4. 云电脑 AIGC 上手实测4.1 ToDesk4.1.1 AIGC 技术集成情况4.1.2 界面及功能4.1.3 项目部署4.1.4 黑神话悟空 AI 换脸4.1.6 AIGC 文生图体验 4.2 青椒云4.2.1 AIGC 技术集成情况4.2.2 界面及功能…

C++(十八)

前言&#xff1a; 本文依据上一篇&#xff0c;继续对C中的函数进行学习。 一&#xff0c;内联函数。 再执行函数代码时&#xff0c;比不使用函数花费了更多时间&#xff0c;因为总结步骤&#xff0c;传递参数和返回值都很花费时间。 因此&#xff0c;在调试小型函数时&…

功能篇:JAVA后端实现跨域配置

在Java后端实现跨域配置&#xff08;CORS&#xff0c;Cross-Origin Resource Sharing&#xff09;有多种方法&#xff0c;具体取决于你使用的框架。如果你使用的是Spring Boot或Spring MVC&#xff0c;可以通过以下几种方式来配置CORS。 ### 方法一&#xff1a;全局配置 对于所…

数独游戏app制作拆解(之一)——功能介绍

android studio版本&#xff1a;2023.3.1 例程名称&#xff1a;shudu666 前阵子作了一个EXCEL版的数独&#xff0c;再早之前就想作这个数独app,但一直没动手&#xff0c;一方面懒&#xff0c;另一方面我把自己绕到坑里了&#xff0c;之前做的是一解数独的app,那个是有点难&am…

Spring注解篇:@Configuration详解

前言 在Spring框架中&#xff0c;Configuration注解是实现Java配置的核心。它允许开发者以编程的方式定义Bean的创建过程&#xff0c;而不是使用XML文件。这种基于注解的配置方式&#xff0c;不仅简化了配置的复杂性&#xff0c;还提高了代码的可读性和可维护性。 摘要 本文…

通过一个例子学习回溯算法:从方法论到实际应用

回溯算法&#xff1a;从方法论到实际应用 回溯算法&#xff08;Backtracking&#xff09;是一种通过穷举法寻找问题所有解的算法&#xff0c;它的核心思想是逐步构建解空间树&#xff0c;在每个步骤中判断当前解是否合法。如果不合法&#xff0c;就“回溯”到上一步&#xff0…

Python随机抽取Excel数据并在处理后整合为一个文件

本文介绍基于Python语言&#xff0c;针对一个文件夹下大量的Excel表格文件&#xff0c;基于其中每一个文件&#xff0c;随机从其中选取一部分数据&#xff0c;并将全部文件中随机获取的数据合并为一个新的Excel表格文件的方法。 首先&#xff0c;我们来明确一下本文的具体需求。…

构建树莓派温湿度监测系统:从硬件到软件的完整指南

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…