vue部署后静态文件加载404的解决

针对 vue 应用部署后静态文件加载 404 的情况，以下是解决方法的完整攻略。

现象

应用部署后，访问应用的静态文件（如 CSS、JS、图片等）时会出现 404 错误。

原因

原因通常是因为静态资源文件的路径找不到或者没有正确引入。

解决方案

解决该问题，可以采用以下两种方案：

方案一：history 模式

在 Vue Router 中，mode 可以设置为 history 模式来解决静态资源路径问题。在这种模式下，应用的地址会表现为正常的 URL 地址，比如 /about 或 /contact 等。而不使用该模式则 URL 地址会像这样：/#/about 或 /#!about。

1. 配置 Vue Router

在 router/index.js 中添加如下代码：

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld.vue';
import About from '@/components/About.vue';
import Contact from '@/components/Contact.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact,
    },
  ],
});

1. 在服务器中配置

在服务器端需要配置一下，如果是 nginx 则需要在/nginx/conf/nginx.conf 中添加以下代码：

location / {
    try_files $uri $uri/ /index.html;
}

这里的 try_files 就是尝试访问指定的文件，如果找不到则直接返回 index.html 页面。这避免了 URL 访问时出现 404 错误的情况。

方案二：publicPath

在打包时，可以通过设置 publicPath 来解决静态文件路径的问题。该方法适用于那些不支持 history 模式的服务器或者是处理静态资源的CDN服务器。

在 vue.config.js 中添加以下代码：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-app/'
    : '/',
};

这里的 publicPath 就是指定资源文件的基础路径，如上面的 /my-app/ 就是一个网站或者 CDN 路径的基础路径，这个路径就是所有文件路径的前缀。

以上就是 vue 部署后静态文件加载 404 错误的两种解决方案。

示例说明

示例一

该示例是基于 publicPath 方案的，有以下的目录结构：

my-app/
  node_modules/
  src/
    assets/
      logo.png
  public/
    index.html
    favicon.ico

在 vue.config.js 中添加以下代码：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-app/'
    : '/',
};

在 index.html 中的 img 标签里设置相对路径：

<img src="./assets/logo.png" alt="logo">

这里的 publicPath 为开发环境下的根路径 /，而在生产环境下的 publicPath 为 /my-app/，这样就能够正常的加载到静态资源文件了。

示例二

该示例是基于 history 模式的，基本 publicPath 的解决方案一样，只是在路由模式上有所不同。

路由添加方式：

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/about',
      component: About,
    },
  ],
});

服务器配置（nginx）：

location / {
  try_files $uri $uri/ /index.html;
}

以上是两个示例分别使用不同的方案解决 vue 部署后静态文件加载 404 的问题。