nginx部署vue项目，给访问路径加前缀

Nginx安装与启动

去官网下载nginx压缩包，解压到电脑合适位置，我这放在D盘，目录是D:\nginx-1.21.6，

在这个路径，直接输入cmd，打开命令行，启动命令：

nginx.exe

或者

start nginx

关闭命令

 taskkill /f /t /im nginx.exe

修改了配置文件，不需要先关闭再启动，直接重启，重启命令

nginx -s reload

Vue增加访问路径

有时候会根据需要，区分不用的vue项目，这样要加一个前缀，不加前缀，访问是http://localhost:8080/，加一个前缀，cancer，访问路径就是http://localhost:8080/cancer
这个路径，在router/index.js修改配置，增加一个base

const router = new VueRouter({routes: routes.concat(asyncRouterMap),base: window.publicPath ? window.publicPath + "/" : "",mode:process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test"? "history": "hash",
});

window.publicPath就是需要的前缀，window.publicPath = “/cancer”;

然后npm run build打包，把打包后的文件，在nignx路径下html文件夹下，新建一个文件夹，cancer，把包里的内容放进去

nginx配置

 server {#前端启动端口监听listen       8780;#本机ip，也可以是域名server_name  192.168.2.87;location / {  root   html;index  index.html index.htm;}location /cancer {alias  html/cancer;index  index.html index.htm;try_files  $uri  $uri/   /cancer/index.html;}

参考资源
nginx部署vue项目路径添加前缀
nginx根据前缀代理多个Vue项目

nginx部署vue项目，给访问路径加前缀相关推荐

Centos+Nginx部署Vue项目
Centos+Nginx部署Vue项目 1.项目打包生成dist文件夹在项目根目录下打开cmd窗口,输入命令 npm run build //生成dist文件夹 2.将dist文件夹上传到cento ...
VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...
Ubuntu 下搭建 Nginx 部署 vue 项目
Ubuntu 下搭建 Nginx 部署 vue 项目上一篇:Ubuntu 下部署 SpringBoot 第一步: Ubuntu 上安装 nodejs 执行 apt install nodejs 命令 ...
服务器使用Nginx部署Vue项目
服务器使用Nginx部署Vue项目首先得购买个服务器,在这就不教怎么购买了,本文章使用的是阿里云轻量级服务器CentOS7.6 一.安装Nginx 1. 使用XShell连接我们的服务器 2. 配置 ...
nginx部署vue项目加载资源慢优化方案
目录 1.问题 2.解决方案推荐gzip压缩解压 2.1 vue项目的配置文件中加如下配置 2.3 nginx服务器配置 1.问题当我采用nginx部署了vue的项目后发现第一次访问网站需要1分左右 ...
Linux通过Nginx部署Vue项目
Vue+Springboot前后端项目分离开发,我们在部署的时候就需要将两者分开来部署. vue部署由于我们是通过Linux + nginx的方式来部署vue.因此在你的linux中需要安装ngin ...
nginx部署vue项目路径添加前缀
背景:近日客户提出希望在部署后的路径上添加一个项目前缀dist,原来访问地址是http://192.168.11.186:8888,现希望改成http://192.168.11.186:8888/di ...
nginx部署vue项目，内外网映射后访问不到
问题:在内网服务器中用nginx部署了vue项目,再将外网域名与内网IP做了映射. 访问内网IP:PORT 成功进入访问域名:PORT 无法进入例:内网ng地址:123.12.1.2:9000 通 ...

nginx部署vue项目，给访问路径加前缀

Nginx安装与启动

Vue增加访问路径

nginx配置

nginx部署vue项目，给访问路径加前缀相关推荐

最新文章

热门文章