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博客

_揽
+关注
目录
打赏
0
0
0
0
572
分享
相关文章
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
Webpack与Babel的进阶配置与优化
通过以上的进阶配置和优化策略,可以更好地发挥`Webpack`与`Babel`的功能,提高项目的性能和开发效率。
如何配置 Webpack 进行代码分离?
通过以上方法,可以有效地配置Webpack进行代码分离,根据项目的具体需求和场景选择合适的方式,能够显著提高应用的性能和用户体验。在实际应用中,还可以结合其他优化技术,进一步优化Webpack的打包结果和应用的加载速度。
101 5
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
236 60
配置Nginx反向代理实现SSL加密访问的步骤是什么?
我们可以成功地配置 Nginx 反向代理实现 SSL 加密访问,为用户提供更安全、可靠的网络服务。同时,在实际应用中,还需要根据具体情况进行进一步的优化和调整,以满足不同的需求。SSL 加密是网络安全的重要保障,合理配置和维护是确保系统安全稳定运行的关键。
319 60
nginx安装部署ssl证书,同时支持http与https方式访问
为了使HTTP服务支持HTTPS访问,需生成并安装SSL证书,并确保Nginx支持SSL模块。首先,在`/usr/local/nginx`目录下生成RSA密钥、证书申请文件及自签名证书。接着,确认Nginx已安装SSL模块,若未安装则重新编译Nginx加入该模块。最后,编辑`nginx.conf`配置文件,启用并配置HTTPS服务器部分,指定证书路径和监听端口(如20000),保存后重启Nginx完成部署。
780 8
要统计Nginx的客户端IP,可以通过分析Nginx的访问日志文件来实现
要统计Nginx的客户端IP,可以通过分析Nginx的访问日志文件来实现
220 3
配置 Webpack 进行代码分离的常见方法有哪些?
通过以上常见方法,可以根据项目的具体需求和场景,灵活地配置Webpack进行代码分离,从而提高应用的性能和加载速度,优化用户体验。
58 3
史上最走心webpack4.0中级教程——配置之外你应该知道的事
《webpack4.0各个击破系列》适合不满足于只会配置webpack但一时间又看不懂源码的中级读者。我没法保证这个系列是最好的,但至少能保证每一篇博文都跟那些Ctrl+C和Ctrl+V的博文有本质的区别,不信你读读看。
1807 0
|
5月前
|
webpack打包TS
webpack打包TS
148 60
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等