Vue项目打包部署到服务器

news2024/12/15 20:09:29

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,
})