在npm run build之后,打开dist文件中的index.html页面却是一片空白,打开控制台发现报错:Failed to load resource: net::ERR_FILE_NOT_FOUND
时间: 2023-12-02 21:36:43 浏览: 27
这个错误通常是因为在打包过程中,一些静态资源(如图片、字体、CSS等)的路径没有正确设置导致的。你可以检查你的webpack配置文件中的output.publicPath是否配置正确,是否以'/'结尾,是否包含正确的文件路径。另外,也可以检查你的HTML文件中引用静态资源的路径是否正确。如果以上都没有解决问题,可以尝试在打包时开启source map,以便更好地定位问题所在。
相关问题
控制台报错Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico文件找不到。
控制台报错"Failed to load resource: the server responded with a status of 404 (Not Found)"表示浏览器在加载页面时无法找到favicon.ico文件。这个错误可以通过以下两种可能的解决方案来解决。
第一种可能的解决方案是修改配置文件中的assetsPublicPath。你可以找到config文件夹下的index.js文件,在其中将assetsPublicPath的值修改为"./"。这样浏览器在加载页面时就会正确地找到favicon.ico文件。
第二种可能的解决方案是忽略这个错误。截图中的报错是因为浏览器默认会去加载favicon.ico图标,但是我们并没有提供对应的图标文件。不过这个错误并不会影响代码的运行效果,所以可以忽略它。
希望以上解决方案能帮助你解决控制台报错的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue打包npm run build时候界面报错的解决](https://download.csdn.net/download/weixin_38626943/13128820)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [使用Cdn引入vue.js控制台报错Failed to load resource: the server responded with a status of 404 (Not ...](https://blog.csdn.net/blackbak/article/details/129912594)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
vue中在终端执行npm run dev之后报Failed to scan for dependencies from entries: D:/workspacesC#/myvue/vue-project/index.html
这个错误提示是因为在执行`npm run dev`命令时,webpack会扫描项目中的所有入口文件来生成依赖关系图,但是你的入口文件是`index.html`而不是`index.js`或`main.js`,所以webpack无法扫描到正确的依赖关系。
解决方法是将入口文件改为`index.js`或`main.js`,并在该文件中引入`index.html`作为模板文件。具体步骤如下:
1. 将`index.html`重命名为`template.html`,并将其移动到`public`目录下。
2. 创建一个新的`index.js`文件,并在该文件中引入`template.html`作为模板文件。
```
import Vue from 'vue'
import App from './App.vue'
import './assets/css/style.css'
new Vue({
render: h => h(App),
}).$mount('#app')
```
3. 修改`vue.config.js`文件中的`devServer`配置,将`index`选项改为`index: 'index.html'`,这样在开发时会自动打开`index.html`文件。
```
module.exports = {
devServer: {
index: 'index.html',
port: 8080,
open: true
}
}
```
4. 修改`template.html`中的`<div id="app"></div>`为`<div id="app"><app></app></div>`,这样`index.js`中的`render`函数才能正确地将`App`组件渲染到`#app`元素中。
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue App</title>
</head>
<body>
<div id="app"><app></app></div>
</body>
</html>
```
5. 运行`npm run dev`命令,webpack会自动编译打包,并在浏览器中打开`index.html`文件。