vue项目打包部署到nginx上访问404
比如我nginx上不是的目录是tjyy
首先打包时，vue.config.js配置
router配置
nginx配置文件中配置
如配置在根目录下，则去掉项目名称：tjyy
vue配合nginx打包路径层问题
1、需求是访问地址增加一层路径比如：(增加一层路径为customfile)
之前：http:xxxx/login
要求：http:xxxx/customfile/login 其中filename属于ng配置时的一层文件夹
解决：
1、vue项目的webpack配置不同版本有区别大致修改的地方为：
assetPublicPath: '/customfile'
或
public: '/customfile'
2、修改router.js路由模式为： {mode:'history', base:'/customfile'}
3、Nginx配置修改：
location /customfile {
alias /data/xxxx/xxx/customfile/dist; // 这里是服务器资源路径
try_files $uri $uri/ /customfile/index.html;
index index.html;
}
vue项目部署方式:tomcat部署和nginx部署
一般项目前后端分离得话，都会用nginx作为反向代理转发的。
因为项目要兼容ie9,使用axios发ajax请求的时候,不能通过CORS解决跨域的问题,所以尝试部署nginx作反向代理.
其中 vue+webpack+vue-router(history) 部署到nginx服务器下，非根目录，前后端怎样配置文件 这篇文章详细说明了怎么打包vue项目,记得修改config下的index.js文件.
修改为:(只显示修改的部分)
关于nginx的配置,一定需要注意第二篇文章说到的问题;
proxy_pass转发的路径后是否带 “/” 的意义都是不一样的,假设有请求 ,如果配置是第一种情况,不带"/"的话,那么访问的实际是
,直接访问根路径,如果带"/",那么访问的实际是" ",以"/test"作为根路径.
具体配置如下:
因为项目上线，一般需要添加项目名，并且消去vue-router产生的#号，需要在router的配置下，在本项目是router-index.js下配置：
在打包后,会生成dist文件，文件下由以下部分组成：
至此，整个vue项目算是配置完毕，但是部署到tomcat下会出现访问图片 没有带根路径 的问题，如果你引用图片的方式和我一致，如下：
那么可以尝试的解决方法是，重新配置tomcat的；
首先在tomcat的webapps新建文件夹，文件夹名称和上面配置的根路径一致，即为webSite，然后将打包生成的dist文件夹里面的文件复制到webSite下，并且新建文件 WEB-INF/web.xml:
项目结构为：
找到tomcat的conf文件下的server.xml，配置静态服务,找到HOST标签：
这里的配置为：
参考： tomcat配置静态服务
增加这个文件是因为，解除#号，参考官网：
去除vue项目的#号
这里就直接丢配置了：
Nginx本地部署Vue项目
如何使用Nginx来部署我们打包好的前端Vue项目
因为这里做的演示是本地服务，就需要安装在自己的电脑上
1.确认你的电脑是否安装homebrew，打开电脑终端输入：
2.确认homebrew是否安装成功，输入
3.安装nginx
4.确认nginx是否安装成功
6.进入bin目录
输入，启动
验证是否启动成功
如果出现下图，证明nginx已经启动成功
该问题是由于8080端口被占用，解决
首先需要先在打包之前在 Vue 的配置文件里去修改公共路径的配置
同时在项目的 router 目录下 index.js 为 Vue 项目指定路由基本路径为 /
8.打包前端项目,打包成 dist 目录
将打包好的前端项目放到 Nginx 的 html 目录下去
然后将 dist文件 拖到 html 中就可以了
修改一下 Nginx 的配置文件 nginx.conf
配置改动：
(1）端口号为 8088
(2) 服务名称为 localhost
(3)root目录为 html/dist
(4)location地址为 /
处理前台路由 history 模式刷新 404 的问题
配置修改好之后，我们就可以使用 Nginx 的命令来启动 Nginx 服务
如果没有任何提示，就说明 Nginx 服务重新加载配置成功了
浏览器地址栏里访问 了
1.安装nginx(window)
解压即可
2.准备打包好的vue项目(dist) 这里dist文件目录在D:\nginx-1.21.1\html\dist
3.在nginx安装目录中找到D:\nginx-1.21.1\conf）进行修改
vue history模式下nginx
常用的指令有：