The project development is completed, and the next step is to go online. Regarding the deployment of the VUE project, our company’s front end is deployed on the Nginx server. Please refer to the relevant documents of NGINx by yourself. This article documents only some of the problems encountered during deployment.

packaging

Vue project after packaging, is to generate a series of static files, including project request IP into the package, if the background service changes, then the front end of the file, you again want to recompile package, adopted here is that the background management project summary mentions the front-end to request a configuration file, the dynamic change your configuration.

  • Static files
// config.json
{
  "api": "test.com"
}
Copy the code
  • Request file

Request your configuration file in the project Store, write it to state, and have global access to your configuration when called

// api.js
GetConfigApi() {
  returnnew Promise((resolve, reject) => { axios .get(`/config.json? v=${new Date().getTime()}`)
      .then(result => {
        const configApi = {
          API: result.data['api'], // unified interface}; resolve(configApi); }) .catch(error => { reject(error); }); }); }Copy the code

Nginx deployment

Nginx does not need to be modified in hash mode. You only need to deploy your front-end file, so this section only discusses how to modify the. Conf file in history mode

Access to modify the nginx configuration file nginx.conf

server { listen 80; server_name test.com; location / { root /front; // Front-end file path index index.html; //hashMode only configures access to HTML try_files$uri $uri/ /index.html; // historyIn mode}}Copy the code

After the modification, restart the service to access test.com

Deploy to a subdirectory

When we need to deploy the project to a subdirectory, we need to modify the BASE_URL of the project to generate an absolute access path in the subdirectory. Modify the corresponding. Conf configuration file

server { listen 80; server_name test.com; Location /demo {// Sub-directoryalias  /front/demo;
    index  index.html;
    try_files $uri $uri/ /demo/index.html; }}Copy the code

After the modification, restart the service and visit test.com/demo

Cache handling

Static files of front-end projects are often cached by the browser. After the project is compiled, JS, CSS, images and so on actually have hash values to remove the cache. However, after the project is updated, there will still be caching problems, because the whole entry of our project is in the index.html file. The browser actually caches our HTML page, so we tell the browser in Nginx that the HTML file is not cached.

  location /demo {
    add_header Cache-Control 'private, no-store, max-age=0'; . }Copy the code

conclusion

Only nginx-related deployments are discussed here; in fact, vue-Router documentation provides configuration examples.

Other summary articles:

  • Webpack general packaging optimization
  • Component communication processing scheme
  • Background management project summary

Welcome to pay attention to the public number, we communicate and progress together.