VueJS -在npm run build之后,我得到了空白页

9rnv2umw  于 2023-04-30  发布在  其他
关注(0)|答案(9)|浏览(216)

在我运行“npm run build”之后,我在控制台中得到了这个提示:
构建完成。
提示:构建的文件应该通过HTTP服务器提供。开盘指数。html over file://不起作用。
在我的本地服务器上,npm run dev工作正常,但在Apache服务器上上传项目后,安装node_modules(npm install)并运行“npm run build”,我在控制台中得到提示和空白页面,在我的浏览器中的dev控制台中没有错误
服务器(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构建一个Web应用程序。5.2在本地服务器上运行“npm run dev”后一切正常,但在生产服务器(Apache)上运行构建后,我得到了空白页面。没人知道这个问题..我已经更改了配置/索引。js,添加相对路径,./,/,甚至是绝对路径(我从来没有使用过绝对路径),我在Github论坛上问过,没有答案。..此外,控制台日志浏览器中没有错误。

hts6caw3

hts6caw31#

假设您使用的是webpack template for vue cli,这应该会有所帮助。这可能有助于了解差异的原因是,如果您要使用webpack-simple template,它有一个webpack-config.js文件,直接使用webpack中的publicPath属性(而不是assetsPublicPath)。
不久前,我遇到了类似的情况。这似乎是由于我使用了本地开发服务器npm run dev,将根级别的东西示例化到本地开发服务器,而不是我的生产路径,它是服务器上的子目录。我通过更改您提到的assetsPublicPath属性来解决这个问题,仅适用于config/index.js中的build配置。
assetsPublicPath设置为空字符串应使构建遵循路径相对于网络资源。这类似于编写<script src="/path/to/my.js"></script>(对于服务器而言绝对值)和<script src="relative/path/to/my.js"></script>(相对于定义脚本标记的html文件而言)的区别。
下面是我的配置代码片段。

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

gkn4icbw2#

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

module.exports = {
    publicPath: ''
}

在我的情况下,这解决了问题。资料来源:请看这里。

d5vmydt9

d5vmydt93#

我一直在搜索这个问题(npm run dev工作,但build有一个空白页)。
assetsPublicPath可以在/config/index中更新。js文件,如果您的项目将在子文件夹中的服务器上结束。但是,最终对我起作用的是,我在路由器设置中使用了mode: 'history'。这在开发过程中没有问题,但在构建过程中却无法正常工作。
这里列出了有关将服务器配置为work with history mode here的更多详细信息。但我不想在此刻弄乱服务器设置,如果我不使用历史模式,那么它立即为我工作。

qvsjd97n

qvsjd97n4#

我也遇到了同样的问题,当我删除vue-router中的mode: 'history'时(正如Dean提到的),没有得到一个黑页。
来自VueJs文档:
.....要解决这个问题,你需要做的就是在你的服务器上添加一个简单的覆盖所有的回退路由。如果URL不匹配任何静态资产,它应该提供相同的索引。您应用程序所在的html页面。(https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode)
因此,启用历史模式所需做的就是添加一个全面覆盖的路由:

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

注意:此catch-all路由应该位于所有其他路由之后的底部(否则,所有请求都会转到它)。

yfwxisqw

yfwxisqw5#

我通过创建一个Vue解决了我的问题。根目录下的config.js文件

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/dist/'
    : '/'
}

注意:更改 /dist/ 到你的静态文件所在的文件夹名称
然后npm run build
我用vscode的live服务器检查了它,它工作正常

yqkkidmi

yqkkidmi6#

我也有这个问题。我的main.js是这样的:

const vm = new Vue({
  render: h => h(App),
  router,
  })
}).$mount('#app')

“vm”变量在我的main中从未使用过。js.我以为webpack排除了未使用的变量。所以我初始化了“new Vue”而没有将它赋值给变量。问题解决了

acruukt9

acruukt97#

所以我有这个错误有一段时间了,我尝试了上面提出的所有解决方案,但似乎没有一个工作。然后我注意到在开发中,有一个“你可能在组件渲染函数中有一个无限的更新循环”的警告,我一直忽略了这个警告,在修复组件之后,npm run build开始工作得很好。
我希望这能帮到一些人

rks48beu

rks48beu8#

我正在使用Vue 3,在运行"npm run build"后遇到了这个问题。为了在我的生产服务器上修复它(通过AWS lightsail在Ubuntu上的Bitnami LAMP堆栈),我必须在生成的生产索引中更改两行。html,在:(./dist/index.html)在那个文件中,我必须在前面加上一个'。在script和link元素中的src和href属性上。
我的脚本标记声明在编辑后具体如下所示:<script type="module" crossorigin src="./assets/index.4a1f78d4.js">
作为一个可能与其他人相关的旁注,使用npm的服务,serve -s dist从项目根到测试部署没有正确地复制我的bitnami Apapche 2服务器环境。具体来说,这种方式的测试并没有揭示我需要在索引中更改文件路径的事实。html,我在实际服务器上测试时发现了这一点。

ht4b089n

ht4b089n9#

如果有人正在使用vite(来自与@RomanKaragodin相同的来源):
base: "./"添加到您的vite。config.js.

相关问题