使用 travis 在 gh-pages 上部署后的空白页面
Blanked page after deploy on gh-pages, using travis
我真的卡在了如何在 vue CLI 3 中创建 gh-pages。
我有一个项目：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/ 我真的不知道如何解决。有什么想法吗？
如您所见，部署本身没有任何问题，您的资产 available from the Player directory of your GitHub pages. The reason why your vue-cli application can't resolve the assets properly is, environment variables that not prefixed with VUE_APP_ can't be recognized on script files, 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/"
最后，更改 vue.config.js 文件中的 publicPath 键以获取注入的 Vue 环境变量：
publicPath: process.env.VUE_APP_PUBLIC_PATH
再次部署您的项目，您会看到您的 publicPath 已更改为生产路径，并且您的资产将按预期加载。
我真的卡在了如何在 vue CLI 3 中创建 gh-pages。
我有一个项目：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/ 我真的不知道如何解决。有什么想法吗？
如您所见，部署本身没有任何问题，您的资产 available from the Player directory of your GitHub pages. The reason why your vue-cli application can't resolve the assets properly is, environment variables that not prefixed with VUE_APP_ can't be recognized on script files, 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/"
最后，更改 vue.config.js 文件中的 publicPath 键以获取注入的 Vue 环境变量：
publicPath: process.env.VUE_APP_PUBLIC_PATH
再次部署您的项目，您会看到您的 publicPath 已更改为生产路径，并且您的资产将按预期加载。