Vue项目的二级目录部署在Nginx中,主要涉及到Vue项目的构建配置、Nginx的服务器配置以及可能的路由配置。下面我将分点详细解答这个问题: 1. 理解Vue项目的构建和部署流程 在部署Vue项目到Nginx的二级目录时,首先需要确保Vue项目在构建时设置了正确的publicPath。这个publicPath将决定打包后的资源(如JS、CSS、图片等)的基础...
首先找到自己的vue的项目然后输入命令 npm run build 他会在你的vue目录下生成一个dist文件夹里面就是你的vue的项目 然后打开这个dist文件夹把里面的内容复制下来里面会有两个文件一个是index.html是主目录还有一个是static文件夹 把他们复制下来然后打开你的nginx的目录下的html文件里面会有两个默认文件直接删掉不要...
注意: 这种方式配置的话,location / 目录是root,其他的要使用alias。 可以看到,这种方式的好处就是我们只有一个server,而且我们也不需要配置二级域名。并且前端项目里要配置二级目录 links: 参考链接:使用nginx部署多个前端项目
dsp项目 :http://dsp.xxxx.com bi项目:http://bi.xxxx.com 1. 在vue.config.js文件下找到publicPath配置,添加如下配置(vuecli2就是config文件夹下的assetsPublicPath配置) publicPath: process.env.NODE_ENV === "production" ? "/bi/" : "/bi/", 2.修改项目router的base export default new Router({ ...
使用Vite创建一个Vue项目,点我查看如何创建 配置打包路径# 在Nginx中如果是二级目录,例如/web时,需要设置线上的打包路径 在项目跟路径下创建两个文件:.env.production、.env.development,写入一下内容: ##生产环境NODE_ENV = 'production' VITE_BASE_PATH = /form-designer/ ...
首先,配置vue项目打包路径 1. vue.config.js module.exports={// 配置正式环境的路径为 您的二级目录publicPath:process.env.NODE_ENV==='production'?'/admin':'/',} 2. 配置vue-router exportdefaultnewRouter({mode:'history',// 去掉url中的#base:'/admin',// 添加base属性,值为您的二级目录scrollBeha...
在已有项目一的情况下,不改变项目一的访问地址,在同一域名的二级目录下部署项目二,配置如下: 一、修改vue.js配置 1. 修改vue-router路由配置 src/router/index.js文件 a. 项目一 constrouter=newVueRouter({mode:'history',routes:routes}) b. 项目二 ...
Vue 3使用二级目录部署(Nginx) 最近通过Vue3写了个Web展示项目,部署的时候不希望再弄个新域名或者二级域名,想到的使用二级目录。 最初按照正常的Vue发布来部署,Nginx配置如下 location ^~/web{alias/data/web; try_files$uri$uri/ /web/index.html;
3、部署时,通过NGINX的反向代理 首先,给需要部署的项目定义一个 NGINX 的 server server { listen 8001; location / { # vue h5 history mode 时配置 try_files $uri $uri/ /index.html; root /home/html/travel_admin/dist; index index.html index.htm; } } 再到配置域名的主配置server上做反向代理 ...
Vue多页面应用与Nginx首先我们看一下nginx.conf配置文件为了方便管理，在/usr/local/nginx/conf.d/创建自己的*.conf配置文件。没有conf.d目录，直接mkdir创建conf.d.conf详细可参考：这种方式只需要开放80端口，然后访问二级域名。在nginx中部署多个vue项目，并进行访问时，如果请求刷新一直转圈，可能是由于...