[使用travis部署到gh页上的空白页

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 [email protected]:<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应用程序无法正确解析资产的原因是，脚本文件VUE_APP_无法识别没有以as stated on the documentation开头的环境变量。

考虑到上述情况，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已随生产路径更改，并且资产将按预期加载。