将nuxt.js项目部署到域名二级目录下

1、实现目标：开发环境(dev)在根目录运行（例如：http://192.168.117.2:3100/），生产环境(prod)在二级路由 /mock 运行（例如：http://192.168.117.2:3100/mock/ ）。部署到域名二级目录下的访问地址：https://www.******.com/mock/

2、先配置用于区分开发环境(dev)和生产环境(prod)的env变量，参考我的文章nuxt.js中使用cross-env配置env环境变量_小志哥斯拉的博客-CSDN博客

3、 修改nuxt.config.js文件配置如下：

// 请根据实际需求修改：开发环境(dev)在根目录运行，生产环境(prod)在二级路由 /mock 运行
const routerPrefix = process.env.NODE_ENV === 'prod' ? '/mock' : ''

export default {

  router: {
    base: routerPrefix // 应用的根 URL
  },
  
  server: {
    port: 3100, // 默认: 3000
    host: '0.0.0.0' // 默认: localhost
  },

}

到此已经完成基本的配置了。 

说明一下：配置router即可实现变更应用的根URL，例如像下面的配置，项目将运行在http://192.168.117.2:3100/mock/ 

router: {
    base: '/mock'
}

4、如果引入了外部(static目录下)的css、js，或者是使用了axios，需要同步修改相对应的配置。

 4.1、直接引入的静态资源：

4.2、axios基础路径：

 

 4.3、通过alias方式引入的静态资源，无需配置，例如：

 5、项目运行效果

5.1、开放环境

npm run dev

5.2、生产环境

npm run build

npm start

 6、部署到域名下的二级目录

6.1、运行 npm run build 进行打包。

6.2、打包后正常是将如下四个文件/夹复制到服务器对应目录下，如果有自定义的中间件服务，也要一起复制过去。

 6.3、在服务器对应目录下，运行npm install 安装依赖，npm start 启动项目。

6.4、需要nginx服务器配合，nginx.conf 配置如下：

location /mock/ {
	proxy_pass http://127.0.0.1:3100;
}

  访问： https://www.******.com/mock/ ，代理到：http://127.0.0.1:3100/mock/

 6.5、完成