nginx的部署与vue项目编译

我们在工作中经常会遇到各种各样的部署前端项目问题，虽然问题各有千秋，但是我们通常遇到的是编译与部署的路径问题比较多，所以我们通过一个简单的例子来介绍如何使用 Nginx 进行前端项目的部署，分别说明两种情况：一：前端项目需要部署到子目录；二：前端项目需要部署到根目录。

Nginx 配置文件位于 /etc/nginx/nginx.conf，或者 /usr/local/nginx/conf/nginx.conf。

前端项目部署到子目录： 前端项目部署到子目录，即前端项目需要部署到子目录，例如：http://www.****.com/mobile/。

vue项目打包之后的目录结构：

|--dist
    |--index.html
    |--static/
    |--css/
    |--js/
    |--img/

需要实现部署到子目录，实现访问http://www.****.com/mobile/地址的时候，可以正常的访问到前端项目。

Nginx 配置：

location /mobile/ {
    root /var/www/html/dist/;
    index index.html;
    try_files $uri $uri/ /mobile/index.html;
}

由于vue项目的打包目录是dist，并没有mobile这个目录，所以需要将mobile这个目录作为虚拟目录。这样访问http://www.****.com/mobile/的时候，就会发现找不到静态资源和前端的路由，所以我们打包vue项目的时候进行配置， 1：在vue.config.js中配置base:"/mobile/"

export default defineConfig(({ command, mode }) => {
  return {
    base: "/mobile/",
    // 其他配置
  };
});

2：在router/index.js,配置路由的前缀，如：base:"/mobile/"。如下：

const router = new VueRouter({
  base: '/mobile/',  // 设置基础路径
  routes: [
    // 路由配置
  ],
});

最后编译后的文件，看index.html文件，里面有如下代码会看到资源引用前面多这一截

<script type="module" crossorigin src="/mobile/assets/demo.js" />
<link rel="stylesheet" crossorigin href="/mobile/assets/demo.css" />

前端项目部署到根目录： 前端项目部署到根目录，即前端项目需要部署到根目录，例如：http://www.****.com/。

vue项目打包之后的目录结构：

|--dist
    |--index.html
    |--static/
    |--css/
    |--js/
    |--img/

需要实现部署到子目录，实现访问http://www.****.com/地址的时候，可以正常的访问到前端项目。

Nginx 配置：

location / {
    root /var/www/html/dist/;
    index index.html;
    try_files $uri $uri/ /index.html;
}

vue打包的不虚拟配置虚拟路径 1：在vue.config.js中配置base:"/"

export default defineConfig(({ command, mode }) => {
  return {
    base: "/",
    // 其他配置
  };
});

2：在router/index.js,配置路由的前缀，如：base:"/"。如下：

const router = new VueRouter({
  base: '/',  // 设置基础路径
  routes: [
    // 路由配置
  ],
});

最后编译后的文件，看index.html文件，里面有如下代码会看到资源引用前面多这一截

<script type="module" crossorigin src="/assets/demo.js" />
<link rel="stylesheet" crossorigin href="/assets/demo.css" />

最后启动nginx进行访问，访问http://www.****.com/，和 http://www.****.com/mobile/， 都可以正常访问到前端项目。