博客

详解vuejs中执行npm run dev出现页面cannot GET/问题

  • Post category:http

当我们在执行npm run dev启动Vue.js项目时，可能会遇到页面直接显示cannot GET /的问题，这是由于前端路由没有设置正确或Web服务器未能成功加载该路由引起的。

针对这个问题，可以参照以下步骤进行排查和解决：

1. 检查路由设置

在Vue.js中，路由的配置文件通常是在src/router/index.js中进行配置的。检查一下该文件是否存在，是否配置了正确的路由规则。

示例：

import Vue from "vue";
import Router from "vue-router";
import HelloWorld from "@/components/HelloWorld.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "HelloWorld",
      component: HelloWorld,
    },
  ],
});

上述代码表示如果在浏览器中输入根路径（/）时，会渲染HelloWorld.vue组件。

如果路由配置是正确的，那么需要检查项目的启动脚本。

2. 检查启动脚本

在package.json中配置的启动脚本（scripts），通常是使用vue-cli-service命令，如：

"scripts": {
  "serve": "vue-cli-service serve"
}

或者自定义的脚本，如：

"scripts": {
  "dev": "node build/dev-server.js"
}

检查启动脚本中是否正确指定了Vue.js的入口文件和服务器的运行端口。

示例：

如果你在package.json中的脚本配置如下：

"scripts": {
  "dev": "vue-cli-service serve --open"
}

那么运行npm run dev时，会自动打开浏览器并加载localhost:8080，检查一下页面是否正常打开。

3. 检查Web服务器配置

如果以上两步都正常，但问题仍未解决，那么有可能是Web服务器的配置问题。

在Vue.js中，服务器通常是使用webpack-dev-server来启动的。如果你已经在项目中安装了webpack-dev-server，那么需要检查一下是否正确设置了服务器的配置。

示例：

module.exports = {
  devServer: {
    port: 8080,
    host: "0.0.0.0",
  },
};

上述代码表示设置服务器的运行端口为8080，并开启了跨域访问（设置了host: "0.0.0.0"）。

如果以上步骤都无法解决问题，那么可能需要进一步检查是否有其它问题，如组件引用错误、插件未能正确加载等等。

综上，遇到Vue.js页面cannot GET /问题时，需要逐步检查Vue.js路由配置、启动脚本和Web服务器配置，从而找到并解决导致该问题的根本原因。

Tags: