Foreword: I believe that many front-end developers have their own vUE projects, if you want to make their projects into a website to share with everyone, the most commonly used is to use Github Pages service and Gitee Pages service provided by Github. Among them, Github is a foreign website, while Gitee is a domestic website (with fast access). This article describes how to deploy vuE-CLI 3.0+ projects to Github Pages and synchronize them to Gitee Pages.

I. Service description and matters needing attention

In the Github Pages TAB of your Github project, there is this sentence:

GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository. GitHub Pages aims to host your personal, organizational, or project Pages from the GitHub repository.

GitHub Pages is a service that provides a wide range of services, such as Gitee Pages, Gitee Pages, and GitHub Pages.

Pages service only supports static projects. If your project requires server support, it is not suitable for deployment to this top.

Ii. Precautions for project configuration

1. Do not enable history mode on vue-router

In normal projects, we would turn the vue-router on history mode because there is a “#” in the website path to remove the # sign. However, enabling History mode requires server support, so it is not supported on Github Pages, so we cannot enable History mode.

2. Set the correct publicPath in vue.config.js

To deploy the project to https://.github.io// (the repository address is github.com//)), set publicPath to //. For example, if my repository name is “vue-admin-web”, the contents of vue.config.js should look like this:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vue-admin-web/'
    : '/'
}
Copy the code
Deploy the Github project

Once the above configuration is complete, you can push your project to Github, assuming you have built and successfully pushed your project to the repository. Next, there are two ways to deploy your project on Github Pages. [See vue-CLI official description.] Method 1: Manually push updates

1. In the project directory, create the deploy.sh file with the following content

CD dist git init git add -a git commit -m 'deploy https://<USERNAME>.github.io/<REPO> git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages cd -Copy the code

2. Run the file

Open a CMD command window in the project directory (shortcut: In the project directory, hold down Shift, right mouse button, and select “Open command Window here”)

Sh // Deploy. Sh in the Windows environmentCopy the code

When run, Git executes the commands in that file. Basically, you build the packaged project code and then upload the packaged code to the GH-Pages branch in the repository. (Note: the new repository has only the master branch by default, but does not have the GH-Pages branch. You do not need to create the gh-Pages branch manually. After running the file, it will automatically generate the GH-Pages branch for you.) In the Github Pages TAB under settings-Options of your github project, you can see the address of your project online. Example: kincar. Making. IO/vue – manage /

Method 2: Use Travis CI to update automatically

The above manual update method is ready to deploy the project, but every iteration you need to manually execute the deploy.sh file. It’s not too cumbersome, but we want it to be easier. The gh-Pages branch can be built and uploaded automatically. This can be done using the Travis CI:

1. Create a GitHub with “repo” privilegesThe access token.

The method of obtaining the token is as described on github’s official website. It is very simple, and there is no more introduction here.

Grant Travis access to the warehouse

Log in to Travis CI using your Github account and click the New button on the left side of the page to go to your warehouse page.

This page will display all of your github projects. After turning on the project you want to deploy, click Settings.

On the Settings page, we need to define several environment variables, as shown in the figure below.

After the definition is complete, proceed to step 3.

3. Create a.travis. Yml file in the project root directory.

node_js:
  - "8"

install:
  - npm install

script:
  - npm run build

after_success:
  - cd ./dist
  - git init
  - git config --global user.name "${U_NAME}"
  - git config --global user.email "${U_EMAIL}"
  - git add .
  - git commit -m "Automatically update from travis-ci"
  - git push --quiet --force  "https://${GH_TOKEN}@${GH_REF}" master:${P_BRANCH}

branches:
  only:
    - master
Copy the code

4. Push the.travis. Yml file to the repository to trigger the first automatic build.

Once.travis. Yml is uploaded to the master branch of the repository, an automatic build deployment is performed, and any subsequent Git push to master will trigger an automatic update. This way, your Github Pages site will be updated with the latest content.

At this point, we have completed automatic deployment of the Vue project to GitHub Pages! However, github is a foreign website and sometimes it is very slow to access, so we will consider deploying the project to the domestic website Gitee. With the github project foundation in place, deploying to Gitee Pages is a simple matter of synchronizing Github projects on Gitee.

4. Synchronize to Gitee Pages

1. Import the Github project

Log in to Gitee official website and select “Import repository from GitHub” from the “+” in the upper right corner. Of course, the premise is that you have bound your GitHub account as your Gitee third-party account. If you have not bound your GitHub account, you can set – third-party account binding.

Go to the Import Github repository page and select the project you want to import.

After the import is successful, you will find that all branches and labels are synchronized, in addition to the master code.

2. Enable the Gitee Pages service

After successfully importing the project, we need to start the Gitee Pages service for the project. Click services -Gitee Pages above the project to enter the Gitee Pages service configuration page.

Select GH-Pages for the deployment branch, leave the deployment directory blank, select Force use HTTPS, and click Start to deploy.

After successful deployment, you will see your Gitee Pages website address on the current page. Open the address and you will see your project website, which is exactly the same as GitHub Pages, and the Gitee Pages website will load much faster. Example:kincar.gitee.io/vue-manage

3. Project update

For future project updates, the code will be pushed to Github first. After the successful deployment of Github Pages, click the update button in the Gitee project to forcibly synchronize the code of github project to Gitee.

This completes the deployment of the Vue project to GitHub Pages, with automatic deployment and synchronization to Gitee Pages.