如何在本地机器上没有服务器的浏览器中运行 Build vue js 项目？答案

【问题标题】：How to run Builded vue js project in browser without server on locall machin?如何在本地机器上没有服务器的浏览器中运行 Build vue js 项目？
【发布时间】：2017-09-22 03:06:32
【问题描述】：

我使用'vue-cli'。 我运行了 'npm run build' 命令 来获取项目的构建版本。因此，在“dist”文件夹中自动创建了“index.html”。看图：

我尝试在浏览器中运行 index.html 文件，但它不起作用。浏览器中的按摩表单控制台：

我的 Index.html 文件的内容：

<!DOCTYPE html>
<html lang=ru>
<head>
    <meta charset=utf-8>
    <title>cv</title>
    <style type=text/css>
       html, body{
           width: 100%;
           height: 100%;
       }</style>
    <link href='/static/css/app.b3ceb6191281c6a4dd333aa0b8aed7cd.css' rel=stylesheet>
</head>
<body>
    <div id=app>
    </div>

    <script type=text/javascript src='/static/js/manifest.488e7f096afe65619705.js'></script>
    <script type=text/javascript src='/static/js/vendor.fa2e9b388f427a714cca.js'></script>
    <script type=text/javascript src='/static/js/app.d3d1742ab1cad95402a6.js'></script>
</body>
</html>

我必须做什么才能在没有服务器的情况下在浏览器中运行它？

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

如果您不想使用服务器，则必须将所有源链接更改为

='./static/

或

='static/

首选第一种变体

【讨论】：

我认为您的建议是正确的。我使用了'./static/'。它帮助我解决了连接到“index.html”文件的问题。但在那之后，我的代码中出现了另一个问题（来自控制台的消息）。据我了解，他们在引用方面都有同样的问题。那么为什么'build'项目中的命令'npm run build'会创建错误的引用以及如何纠正呢？
我使用 require() 函数在我的项目中获取图像。我的代码示例：。也许问题就在这里......
你为什么这样做？你使用 vue-cli，并且有一种机制可以使用 url-loader 为构建版本生成正确的 url。你可以删除对图片的要求吗？
我有一些内部带有图像的组件。例如：。我使用 'v-bind' 将 'src' 字符串从外部传输给他们。当我在没有 require() 的情况下执行此操作时，使用“npm run dev”命令可以很好地编译项目。但是当我不使用 v-bind:my-src=" require('./sameFile.aaa')" 将 'src' 字符串传输到图像时，浏览器不会显示它们。
我在使用框架'Laravel'时没有遇到这样的问题。所以我在第一次使用 vue-cli (wabpack) 时看到了这种问题。