Vue.js 项目部署到服务器上报错，解决方案-JavaScript中文网-JavaScript教程资源分享门户

背景

作为一名前端工程师，我们经常需要将自己开发的 Vue.js 项目部署到服务器上，在线上环境中进行测试和运行。但在实际部署过程中，经常会遇到各种各样的问题，例如页面无法正常加载、路由失效等等。本文就来讲解一个常见的问题以及解决方案，帮助大家更好地部署 Vue.js 项目。

问题描述

部署完 Vue.js 项目到服务器上后，页面无法正常加载，浏览器控制台报如下错误：

Uncaught SyntaxError: Unexpected token '<'

问题分析

该错误表示在加载页面时出现了语法错误，且错误的位置在 < 字符处。这说明页面加载失败，无法解析 HTML 内容。而我们在部署时通常将 Vue.js 项目的打包后的静态资源放在服务器上，这些资源包括 HTML、CSS、JS 等文件。因此，问题很可能是出现在 HTML 文件中。

我们可以进一步查看浏览器开发者工具的 Network 面板，查看该 HTML 文件的请求和响应情况。通常情况下，请求应该以 .html 结尾，而响应的 content-type 也应该是 text/html。但是，我们可能会发现，请求的 URL 不以 .html 结尾，而是以 .js 结尾，而响应的 content-type 也是 application/javascript。这时，我们就需要对应用的服务器进行配置，解决该问题。

解决方案

方案一：使用 history 模式

Vue.js 在路由中提供了两种模式：history 模式和 hash 模式。在 history 模式下，路由不会以 # 开头，而是可以正常的 URL；而在 hash 模式下，则需要将 # 号后面的内容作为路由地址，例如 http://example.com/#/foo。因此，使用 history 模式可以解决请求 URL 不以 .html 结尾的问题。

要启用 history 模式，只需在 Vue 实例的路由配置中添加 mode: 'history' 选项即可。

// javascriptcn.com 代码示例
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',  // 启用 history 模式
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
  ]
});

方案二：服务器配置

如果还是出现了类似的问题，那么就需要检查服务器的配置。这里以 Nginx 服务器为例，我们可以使用 Nginx 的 try_files 指令，将所有非静态资源的请求都请求到 index.html 文件上，让 Vue.js 内置的 history 模式路由将其处理。

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

方案三：修改 publicPath

使用 Vue CLI 打包时，可以在 vue.config.js 中配置 publicPath，此项配置项用于配置打包后静态资源的路径。默认情况下，publicPath 是 '/'，如果部署在了一个子目录下，则需要设置为这个子目录。

例如，如果项目部署在 http://www.example.com/my-app/ 目录下，则需要将 publicPath 设置成 '/my-app/'。

module.exports = {
  publicPath: '/my-app/'
}

总结

本文介绍了常见的 Vue.js 项目部署到服务器上出现的一个问题以及对应的解决方案。其中，使用 history 模式和修改 publicPath 都是在 Vue.js 应用中进行配置的方式；而使用服务器配置，则是对服务器进行调整，让它按照我们期望的方式进行处理。希望本文可以对大家在 Vue.js 项目部署过程中遇到的问题有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65857a88d2f5e1655d01c6a6