1. 文章
  2. 前端
  3. 文章详情

如何将Nuxt.js项目部署到服务器Nginx的子目录

发布于5年前(2019-01-20) 分类：前端  阅读(10k+)  评论次数(0)
如何将Nuxt.js项目部署到服务器Nginx的子目录
本地开发Nuxt.js项目的的时候一直使用的是根路径访问（http://localhost:3000），但是部署到测试环境的时候，由于是部署到Nginx的子目录(http://192.168.100.36/nuxtapp)，在做路由跳转的时候跳到了根路径((http://192.168.100.36/),这样就出现了页面找不到的问题。那么如何实现不同环境部署到不同路径下呢？

环境信息

Nginx路径：/home/wwwroot/default/nuxtapp
访问路径：http://192.168.100.36/nuxtapp

Nuxt生成的所有静态文件都存放到了/home/wwwroot/default/nuxtapp路径下

配置方法

Nuxt.js项目有一大好处就是很多配置都可以在一个配置文件nuxt.config.js中进行配置。项目要部署到子目录这里就需要在该配置文件中添加router的base属性，示例：

module.exports = {
    ...
    router: {
       base: '/app/'
    },
    ...
}

我这里由于使用了多个环境，不同环境部署的路径不一样，所以配置稍微有点儿区别：

module.exports = {
  ...
  router: {
     base: process.env.NODE_ENV === 'development' ? '/' : '/nuxtapp/',
  }
  ...
}

该配置就实现了不同环境的差异化访问：

开发环境：http://localhost:3000
测试环境：http://192.168.100.36/nuxtapp

参考文档

更多有关router的配置请参考官方文档：API: router 属性配置 - Nuxt.js

the end

标签： vue nuxt
上一篇:   如何在IntelliJ IDEA中实现Spring Boot项目的自动更新&热加载
下一篇:   Nuxt.js项目如何全局引入Bootstrap,Font Awesome等第三方库
热门文章