The vue project is packaged in history mode and deployed on the code cloud

Problem Description:

The advantage of history mode is that there is no ugly # in the url. As programmers with obsessive-compulsive disorder, they definitely like to package vue projects in history mode, but we all know that history mode needs back-end support, because vue is a single-page application , The backend needs to forward all requests to the index.html page. So, although Code Cloud supports the deployment of static web pages, can it support single-page page applications? The answer is yes.

solution:

One,

First create a new project, and after opening the Pages service, you will see [Gitee Pages service is enabled, website address: http://wayla.gitee.io/compage]

This description, this is the access address of our page, pay attention to the name of comppage, this is the name of your newly created warehouse, and subsequent revisions are subject to your warehouse name. Here I take my comppage warehouse as an example. This is a secondary level Directory, that is: it is not a more directory of the website, so we need to modify the packaged directory and routing.

(1) Modify the packaging directory: modify publicPath: "/compage/" in vue.config.js;

(2) Modify routing configuration: add configuration item base: "/compage/".

export default new Router({
    mode: 'history', // 去掉url中的
    base: '/compage/',
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
})

two,

A blank file named .spa is added to the updated directory after packaging. With this file, when the user refreshes the page, the server will automatically redirect to the index.html page without 404. The packaged directory is as follows:

title

 

three,

Note: Every time you make a modification to the packaged project, you need to update the server in the Pages service of Code Cloud, so that you can see the effect of the modification. Okay, try it yourself~

If you still need to communicate questions,

If you still don’t understand,

If you are also using vue

Let's study and discuss together. ........

You can join our base, the address of our base is: 450342630 (QQ group number)