Vue: Notes when packaging in History mode

Vue: Things to pay attention to when packaging in History mode

1 Introduction

• Today, I used the history mode to package the vue project, and encountered various problems when deploying it in the background. I specially wrote a blog to record it.

2. Routing configuration

• In History mode, the routing configuration file must first be modechanged to history;

• When deploying the project, if there is an additional path after the domain name, you need to pay attention to adding baseit as the prefix for each redirection route;

• The following is a sample setting:

  // router/index.js
  export default new Router({
        
        
      mode : "history",
      base : "/test/dist",			// 项目存放在http://www.xxx.com/test/dist/
      routes : [...]
  })
  

• Added base, the default will be added before the jump path routing basecontent to solve the routing problem occurs because the error 404;

3. Production environment configuration

• This step is very important! ! !

• The main configuration of the production environment is the path of static resources . The configuration file is in /config/index.js:

  build: {
        
        
      index: path.resolve(__dirname, '../dist/index.html'),
      assetsRoot: path.resolve(__dirname, '../dist'),
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',	// 就是这里，为打包后静态资源请求的路径
      ...
  }
  

• When deploying the project today, because the default static path is /requested from the root directory , every time a resource is http://www.xxx.com/static/...requested, it will be requested, and the result is 404 Not Found.

• If your project is deployed in the http://www.xxx.com/test/dist/next, you can change this as follows:

  build: {
        
        
      index: path.resolve(__dirname, '../dist/index.html'),
      assetsRoot: path.resolve(__dirname, '../dist'),
      assetsSubDirectory: 'static',
      assetsPublicPath: '/test/dist/',	// 更改为和base一样的路径
      ...
  }
  

• In this way, the browser will request the static resource when it http://www.xxx.com/test/dist/static/...requests it, which solves the problem that the static resource cannot be found;

3. Background Nginx configuration

• After modifying the configuration as above, I tried to deploy the project to nginx, and found that a 404 error still occurred when the route was redirected. After consulting the official documentation, I found the answer;

• Since the Vue project is a SPA application (ie a single-page application), nginx will prioritize searching for the index.html page under the path according to the path you requested when jumping, while the vue application has only one index.html file in the project root directory , So you need to add a sentence to the nginx configuration file:

  location /test/dist {
      ...
      try_files $uri $uri/ /test/dist/index.html;
      ...
  }
  

• Here $urirefers dist/to the path file in the future;

• Here $uri/refers to the dist/future path;

• The meaning of this sentence is that when the path changes, nginx will first look for the index.html file of the last uri in the address bar. If it can’t find it, it will return the specified html file (here is the return /test/dist/ index.html).

4. Error page configuration

• Due to the nginx configuration, once a 404 error occurs, the index file in the project root directory will be returned. If the page is really not found, how to display the 404?

• After searching hard on the Internet, I found a way: write a 404 page on the vue page by myself, and then add matching rules to the routing configuration file:

  // router/index.js
  import ErrorPage from "@/views/ErrorPage/ErrorPage"
  export default new Router({
        
        
      mode : "history",
      base : "/test/dist",			// 项目存放在http://www.xxx.com/test/dist/
      routes : [
      	...
          {
        
        
              path : '*',			// 这里指当之前的路径匹配不到时，就会渲染对应组件
              components : ErrorPage,
              name : "ErrorPage"
          }
      ]
  })
  

• After configuring the Vue project, nginx also needs to configure the following statement:

  location /test/dist {
      ...
      try_files $uri $uri/ /test/dist/index.html;
      error_page 404 /text/dist/index.html;		
      ...
  }
  

5. Afterword

• I encountered a lot of pitfalls in the process of configuring the project. In the end, I still didn't have a solid foundation. It is recommended that friends who encounter the same mistakes read the official Vue.cli documentation several times to deepen the impression!