详解vue通过NGINX部署在子目录或者二级目录实践

2023年5月25日下午4:05 • 人工智能概览

针对“详解vue通过NGINX部署在子目录或者二级目录实践”的问题，我可以给出以下攻略：

攻略概述

在Vue项目的打包后，将其部署到NGINX的子目录或者二级目录下时，需要特别注意一些配置细节。本攻略主要分为以下三个部分展开讲解：

修改Vue项目的打包配置，以支持部署于子目录或者二级目录下；
配置NGINX的转发规则，使请求正确地映射到Vue项目；
编写示例代码，进行测试验证。

修改Vue项目的打包配置

在打包Vue项目时，需要修改部分Webpack的配置，具体来说，需要修改vue.config.js文件。假设我们要将Vue项目部署到NGINX的子目录或者二级目录/vueapp下，那么我们需要在该配置文件中做出如下修改：

module.exports = {
  publicPath: '/vueapp/', // 指定公共路径
  // ...
}

在上述代码中，我们使用了Webpack构建工具提供的配置项publicPath，将其设置为'/vueapp/'，代表我们的打包资源都将存放于/vueapp/目录下。

配置NGINX的转发规则

在Vue项目的打包完成后，我们需要将其部署到NGINX服务器上。这里我们需要配置NGINX的转发规则，将请求转发到正确的目录。下面是一个简单的配置示例：

location /vueapp/ {
  alias /path/to/vueapp/dist/;
  index index.html;
  try_files $uri $uri/ /vueapp/index.html;
}

在上述代码中，我们根据实际的部署路径，设置了location的值为/vueapp/。同时使用了alias指令，将请求映射到/path/to/vueapp/dist/目录下。最后，将请求的URL重写为/vueapp/index.html，确保Vue项目的入口文件正确加载。

示例代码

假设我们按照上述配置，将Vue项目部署到了服务器上的/vueapp/目录下。那么我们可以编写一个简单的Vue组件，作为测试用例，验证我们的配置是否正确。下面是一个示例代码：

<!-- /vueapp/index.html -->

<!DOCTYPE html>
<html>
  <head>
    <title>Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/vueapp/js/app.js"></script>
  </body>
</html>

// /vueapp/js/app.js

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

在上述代码中，我们引入了Vue组件，并将其绑定到了#app元素上。同时在index.html中，我们使用了/vueapp/js/app.js路径，确保请求的正确映射。这样，我们就可以进行测试验证了。