Question

我有一个Vue项目，当我查看文件index.html时，我得到一个空白页，当我进入浏览器控制台时，我看到了错误

GET file:///dist/build.js net::ERR_FILE_NOT_FOUND

这是在我的main.js中

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import Jumbotron from './Jumbotron.vue'
Vue.component('jumbotron', Jumbotron)

new Vue({
  el: '#app',
  render: h => h(App)
  //router: router
})

这是我的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vuejs-blog</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

有人知道如何解决此问题吗？

Answer 1

如果要将Vue与.vue文件组件一起使用-您需要使用webpack运行Web服务器。如果您使用vue-cli创建了该项目，则可以从命令行运行npm run serve。否则，您必须编写一个webpack配置，以便将您的代码转换为浏览器可以理解的内容。

This was my first project I ever built with Vue-它使用了多个利用模板文字的文件。如果您有兴趣学习Vue而不必弄乱{{1} }等。（就像我想先做的那样）

您无法在尝试时加载webpack文件，也无法通过.vue协议加载模块文件-这种“高级”代码风格需要Web服务器。

如果您想打开一个包含file://代码的.html文件-您必须为此使用template literals。该文章概述了7您可以使用不同的方式来构建Vue组件-条目＃2概述了如何使用Vue。

如果将以下代码保存到template literals文件中，然后双击它-它将起作用。

.html

Answer 2

@Matt的解决方案是正确的，但对我来说也有用的是运行

npm run dev

从终端

GET file：///dist/build.js net :: ERR_FILE_NOT_FOUND

2 个答案: