使用travis在gh-pages上部署后的空白页面

Question

我真的迷住了如何在gh-pages中创建vue CLI 3。

我有一个项目：https://github.com/aniaska4/Playlist，

我遵循了以下指示：travis。

因此我添加了.travis.yml：

 language: node_js
 node_js:
 - "node"

 cache: npm

script: npm run build

deploy:
provider: pages
skip_cleanup: true
github_token: $GITHUB_TOKEN_Movies
local_dir: dist
on:
 branch: master

我还添加了deploy.sh文件：

#!/usr/bin/env sh
# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f https://github.com/aniaska4/Playlist.git master:gh-pages

cd - 

在vue.config.js中，我添加：

publicPath: process.env.NODE_ENV === 'production'
  ? '/Playlist/'
  : '/',

接下来，我通过travis CI进行了双重投资，成功了。但是，当我创建gh-pages时，页面空白，控制台出现错误。 https://aniaska4.github.io/Playlist/

在网络中，它看起来像这样：

我对，请求URL错误吗？应该是：https://aniaska4.github.io/Playlist/我真的不知道如何解决。有想法吗？

Answer 1

正如您所发现的那样，部署本身没有任何问题，您的资产是GitHub页面的available from the Player directory。您的vue-cli应用程序无法正确解析资产的原因是，在脚本文件as stated on the documentation上无法识别没有前缀VUE_APP_的环境变量。

考虑到上述情况，process.env.NODE_ENV始终是一个虚假值，它会使publicPath在每个环境中均为/。您应该在不同的环境中使用env文件来定义变量。

首先，在项目的根目录上创建一个.env.local文件，内容如下。这些变量将为您的本地开发加载。 （npm run serve）

VUE_APP_PUBLIC_PATH="/"

然后在根项目目录中再次创建.env.production文件。这些将在您进行生产构建时注入。 （npm run dist，因此是vue-cli-service build --mode production）

VUE_APP_PUBLIC_PATH="/Playlist/"

最后，更改publicPath文件中的vue.config.js键以获取注入的Vue环境变量：

publicPath: process.env.VUE_APP_PUBLIC_PATH

再次部署您的项目，您会看到publicPath随生产路径更改，并且资产将按预期加载。