VueJS-在npm运行构建后，我得到了空白页

Question

在运行“ npm run build”之后，我在控制台中得到了这个提示：

构建完成。

提示：内置文件应通过HTTP服务器提供。在file：//上打开index.html无效。

在我的本地服务器上，npm run dev可以正常工作，但是在将项目上传到Apache服务器上之后，安装了node_modules（npm install）并运行了“ npm run build”，我在控制台中得到了提示，并有一个空白页，没有错误。浏览器中的开发者控制台

服务器（Apache）上的路径是：/ mydomainproject / public / projects文件：

build
config
dist
node_modules
src
static
.babelrc
.editorconfig
.postcssrc.js
index.html
package.json
package-lock.json
.htaccess

这是我的public / config / index.js

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

我已将assetsPublicPath：“ /”更改为assetsPublicPath：“ ./”，也尝试了assetsPublicPath：“ ./ public”，但仍然无法正常工作。

拜托，有人可以帮我吗？

谢谢！

现在，我真的很害怕，我正在本地服务器上使用Vue 2.5.2版构建一个Web应用程序，运行“ npm run dev”后一切正常，但是在生产服务器（Apache）上运行构建后，我得到了空白页。 ..没有人知道这个问题...我已经更改了config / index.js，添加了相对路径，。/，/，甚至是绝对路径（我从不使用绝对路径），我在Github论坛中问过，答案...此外，控制台日志浏览器中没有错误。

Answer 1

也许解决该问题的最简单方法是vue.config.js在项目的根目录中创建一个文件并向其中添加以下代码：

module.exports = {
    publicPath: ''
}

在我的情况下，这解决了问题。信息来源：参见这里。

Answer 2

假设您正在将Webpack模板用于vue cli，看起来像这样，这应该会有所帮助。了解不同之处可能有用的原因是，如果您要使用webpack-simple模板，则它具有单个webpack-config.js文件，可以直接使用publicPathwebpack的属性（而不是assetsPublicPath）。

不久前，我遇到了似乎相同的情况。这似乎是由于我使用本地开发服务器npm run dev在我的本地开发服务器的根级别上实例化了事物，而不是我的生产路径（服务器上的子目录）。我通过更改assetsPublicPath您提到的可使用的属性（仅针对的build配置）解决了该问题config/index.js。

assetsPublicPath对空字符串的设置应使构建尊重路径相对于网络资产。这类似于写入<script src="/path/to/my.js"></script>（对服务器是绝对的）和<script src="relative/path/to/my.js"></script>（相对于定义了script标记的html文件）的区别。

这是我的配置片段。

// config/index.js
...
module.exports = {
  build: {
    ...
    assetsPublicPath: '',
    ...
  },
  dev: {
    ...
    assetsPublicPath: '/',
    ...
  }
}

Answer 3

我一直用同样的问题搜索（npm run dev 工作但构建有一个空白页面）。

如果您的项目将在服务器的子文件夹中结束，则可以在 /config/index.js 文件中更新 assetsPublicPath。但是，最终对我有用的是我mode: 'history'在路由器设置中使用的。这在开发过程中没有问题，但在构建过程中它不起作用。

此处列出了有关配置服务器以使用历史记录模式的更多详细信息。但是我现在不想弄乱服务器设置，如果我不使用历史模式，那么它立即对我有用。

Answer 4

mode: 'history'我遇到了同样的问题，当我删除时没有得到黑页vue-router（正如迪恩提到的）。

来自 VueJs 文档：

....要解决此问题，您所需要做的就是向您的服务器添加一个简单的包罗万象的后备路由。如果 URL 与任何静态资源不匹配，它应该提供与您的应用程序所在的相同的 index.html 页面。 ( https://router.vuejs.org/guide/essentials/history-mode.html#html5-history -模式）

因此，要启用历史模式，您所需要做的就是添加一条包罗万象的路线：

{
   path: '*',
   name: 'catchAll',
   component: Home
}

注意：这个包罗万象的路由应该位于底部——在所有其他路由之后（否则，所有请求都将转到它）。