nginx vue2+webpack 和 vue3+vite 配置二级目录访问

简介: nginx vue2+webpack 和 vue3+vite 配置二级目录访问

我们开发中会遇到这样的需求,让我们用服务器nginx部署一个用域名的二级目录来访问项目

https:xxx/二级目录/来放访问项目



思路

将项目中的访问路由和静态资源文件,都加上要配置的二级目录,然后配置nginx的二级目录就ok了

首先我们要配置一个106.13.0.11:8083/qfqzApp的二级路由,针对于vue2项目,我们需要进行一下操作。

1、nginx配置(vue2 和 vue3配置的nginx相同)

server {
    listen 8083;     #1.监听访问端口
     server_name 106.13.0.11;     #2.当前服务器ip或者域名或者localhost
     # 这里要写成末尾不带"/"的形式,如果写成"/qfqzApp/"单单访问106.13.0.11:8083/qfqzApp会404
     location /qfqzApp { 
        alias   /usr/web/qfqz/dist/;     # 这里配置alias(配置root的话,必须了解访问规则)
        index index.html index.htm;
        try_files $uri $uri/ /qfqzApp/index.html;     # 这里在/index.html的基础上,前面需要加上/qfqzApp
        gzip_static on;
     }
 }

2、vue2+webpack的配置

(1)vue.config.js配置

配置

module.exports = {
  publicPath: "/qfqzApp/"
}

(2)router配置

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL, // 这个就是上面的publicPath
  routes,
});

3、vue3+vite的配置

(1)vite.config.js配置

配置

export default defineConfig({
  base: "/qfqzApp/"
})

(2)router配置

const router = createRouter({
  // 指定路由的模式,此处使用的是history模式
  history: createWebHistory("/qfqzApp/"),
  // 路由地址
  routes
});

4、发布

配置完以上三步后,

vue项目进行打包发布复制到服务器对应目录下,

nginx配置改完记得进行重启。

然后就能够正常访问二级路由了。

5.扩展

Nginx 配置中root和alias的区别分析__揽的博客-CSDN博客

目录
相关文章
|
2天前
|
应用服务中间件 API nginx
nginx配置反向代理404问题
【10月更文挑战第18天】本文介绍了使用Nginx进行反向代理的配置方法,解决了404错误、跨域问题和302重定向问题。关键配置包括代理路径、请求头设置、跨域头添加以及端口转发设置。通过调整`proxy_set_header`和添加必要的HTTP头,实现了稳定的服务代理和跨域访问。
nginx配置反向代理404问题
|
1天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
14 5
|
3天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
17 7
|
5天前
|
前端开发
配置 Webpack 实现热更新
【10月更文挑战第23天】还可以进一步深入探讨热更新的具体实现细节、不同场景下的应用案例,以及如何针对特定需求进行优化等方面的内容。通过全面、系统地了解 Webpack 热更新的配置方法,能够更好地利用这一功能,提升项目的开发效率和性能表现。同时,要不断关注 Webpack 及相关技术的发展动态,以便及时掌握最新的热更新技术和最佳实践。
|
2天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
9 2
|
7天前
|
缓存 负载均衡 应用服务中间件
Nginx配置
【10月更文挑战第22天】在实际配置 Nginx 时,需要根据具体的需求和环境进行调整和优化。同时,还需要注意配置文件的语法正确性和安全性。
26 7
|
5天前
|
存储 缓存 监控
配置 Webpack 5 持久化缓存时需要注意哪些安全问题?
【10月更文挑战第23天】通过全面、系统地分析和应对安全问题,能够更好地保障 Webpack 5 持久化缓存的安全,为项目的成功构建和运行提供坚实的安全基础。同时,要保持对安全技术的关注和学习,不断提升安全防范能力,以应对日益复杂的安全挑战。
|
测试技术 应用服务中间件 nginx
Nginx目录文件列表显示
项目中使用了tomcat,Nginx,测试阶段,生产阶段经常会有些bug需要调查。 需要有些日志管理工具,在没有ELK的情况下,可以通过配置nginx来实现基本的日常查看。
972 0
|
10天前
|
应用服务中间件 BI nginx
Nginx的location配置详解
【10月更文挑战第16天】Nginx的location配置详解
|
17天前
|
缓存 负载均衡 安全
Nginx常用基本配置总结:从入门到实战的全方位指南
Nginx常用基本配置总结:从入门到实战的全方位指南
191 0