Manual pure static file packaging and deployment preview link (deployed to GitHub), from the cli official file of vue, using yarn

After writing the project, you need to deploy and publish it. This project built using vue@cli only has front-end static files, calls the back-end interface, and can use this step if it is deployed to GitHub.

Points to note: 1. Your gitbash is installed and configured.

2. Every time you modify the code, you need to push it to the production environment.

3. This is a manual update step, but it can also be updated automatically. Additional configuration is required.

There will be two environments, so two warehouses need to be built, one is the environment where the code is placed, and the other is the production environment and the code environment. Code changes require bulid, which will generate a new production line break, and then push to the warehouse where the production environment is stored,

1, command line

``` yarn build

```

2.

Click the link and switch the language to Chinese


Use something to monitor the generated dist directory

~~~

yarn global add serve

serve -s dist

//These two lines ensure that the dist directory is packaged

~~~

After installation, the web page port will become more than 5000, and the packaged file will be compressed.

3. Set the correct value in vue.config.js publicPath.

~~~

module.exports = {

publicPath: process.env.NODE_ENV === 'production'

? '/my- project/' //The name of the production environment

: '/' //

}

~~~

4. Build deploy in the project .sh file

~~~

#!/usr/bin/env sh

# Abort the script when an error occurs

set -e

# Build

npm run build

# cd to the directory of the build output

cd dist

# Deploy to the custom domain name

# echo 'www.example.com' > CNAME

git init

git add -A

git commit -m 'deploy'

# Deploy to https://.github.io

# git push -f git@github.com:/.github.io. git master

# Deploy to https://.github.io/

# git push -f git@github.com:/ .git master:gh-pages

cd -

~~~

Then execute deploy.sh

~~~

//You need to configure the environment gitbash, cmder

sh deploy.sh

//Will run the command in the file

~~~

The above is the detailed content of Manual pure static file packaging and deployment preview link (deployed to GitHub), from the cli official file of vue, using yarn. For more information, please follow other related articles on the PHP Chinese website!