你运行 `
npm run dev` 后浏览器报错：
```
Cannot GET /
```
这表示 **开发服务器启动了，但无法找到根路径 `/` 的页面内容**。通常出现在使用 `webpack-
dev-server` 时配置不当的情况。
---
## 🔍 常见原因分析
### ✅ 正确情况：
- `webpack-
dev-server` 应该根据 `HtmlWebpackPlugin` 自动生成一个 `index.html`
- 并在内存中提供服务，访问 `http://localhost:8080/` 时应显示你的
Vue 应用
### ❌ 导致 “
Cannot GET /” 的常见原因：
1. **没有正确配置 `HtmlWebpackPlugin`**
2. **模板 HTML 文件路径错误或不存在**
3. **`
devServer.static` 配置错误**
4. **输出路径（output.path）与静态资源服务不一致**
5. **未设置 `
devServer.open` 或打开的是错误路径**
---
## ✅ 解决方案：确保完整正确的 Webpack 配置
请检查你的 `webpack.config.js` 是否包含以下关键部分：
```js
const path = require
('path'
);
const {
VueLoaderPlugin } = require
('
vue-loader'
);
const HtmlWebpackPlugin = require
('html-webpack-plugin'
);
module.exports = {
mode: '
development',
entry: './src/main.js',
output: {
path: path.resolve
(__dirname, 'dist'
),
filename: 'bundle.js'
},
devServer: {
static: {
directory: path.join
(__dirname, 'public'
) // 指定静态资源目录
},
port: 8080,
open: true,
hot: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.
vue$/,
loader: '
vue-loader'
},
{
test: /\.css$/,
use: ['
vue-style-loader', 'css-loader']
}
]
},
plugins: [
new
VueLoaderPlugin
(),
new HtmlWebpackPlugin
({
template: './public/index.html' // 必须存在该文件
}
)
],
resolve: {
extensions: ['.js', '.
vue'],
alias: {
'
vue$': '
vue/dist/
vue.esm-bundler.js'
}
}
};
```
---
## ✅ 必须检查的几点
### 1. ✅ 确保 `public/index.html` 存在
路径：`public/index.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=
device-width, initial-scale=1.0"/>
<title>
Vue 3 + Webpack</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
```
> ⚠️ 如果这个文件不存在，`HtmlWebpackPlugin` 会生成默认页面，但有时路径映射出错会导致空白或 404。
---
### 2. ✅ 确保 `
devServer.static.directory` 正确指向静态资源目录
Webpack 5 中推荐写法是对象形式：
```js
devServer: {
static: {
directory: path.join
(__dirname, 'public'
)
}
}
```
而不是旧版字符串写法：
```js
devServer: {
static: './public' // 可能失效
}
```
---
### 3. ✅ 确保 `HtmlWebpackPlugin` 被正确引入并使用
- 安装了吗？
```bash
npm install --save-
dev html-webpack-plugin
```
- 插件是否在 `plugins` 数组中？
- `template` 路径是否拼写正确？
---
### 4. ✅ 清除缓存重启服务
有时候缓存导致问题：
```bash
rm -rf dist/ node_modules/.cache/
npm run dev
```
或者尝试强制重新安装依赖：
```bash
npm install
npm run dev
```
---
### 5. ✅ 查看控制台日志
启动时观察终端输出：
```bash
> webpack serve
ℹ ｢wds｣: Project is
running at http://localhost:8080/
✔ ｢wdm｣: Compiled successfully.
```
如果有编译错误（如 `.
vue` 文件解析失败），也会导致页面无法加载。
---
## ✅ 测试建议：手动访问 bundle.js
尝试访问：
- `http://localhost:8080/bundle.js` —— 是否能下载 JS 文件？
- 如果可以，说明打包成功，只是 HTML 没生成或没挂载。
再检查 `index.html` 是否被服务：
- 访问 `http://localhost:8080/index.html` —— 是否存在？
如果都不能访问，说明 `static` 配置有问题。
---
## ✅ 最小可运行结构示例
```
project-root/
├── src/
│ ├── main.js
│ └── App.
vue
├── public/
│ └── index.html
├── webpack.config.js
├── package.json
```
只要结构清晰、配置正确，就能正常运行。
---
## ✅ 总结：解决“
Cannot GET /”的步骤
| 步骤 | 操作 |
|------|------|
| 1 | 确认 `public/index.html` 文件存在 |
| 2 | 检查 `HtmlWebpackPlugin` 是否配置且路径正确 |
| 3 | 使用 `static: { directory: ... }` 正确设置静态资源 |
| 4 | 确保没有语法错误导致构建失败 |
| 5 | 重启服务，清缓存 |
---
扫一扫
982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
