Vue-CLI How to deploy a project to a production server

This tutorial mainly explains the vue project built by Vue-CLI scaffolding. First build and generate dist files (pure static applications), and then automatically deploy to the static file server Nginx.

1. Configuration of Nginx server file

server {
    listen 80;
    server_name ;#Production Environment    location / {
      root /usr/local/www/xxx_program/;
      index ;
      try_files $uri $uri/ /;
    }
  }
  server {
    listen 80;
    server_name ; #Test environment    location / {
      root /usr/local/www/xxx_program_test/;
      index ;
      try_files $uri $uri/ /;
    }
  }

2. Configure the production/test environment Server SSH remote login account

In the project root directory, create a .env file (current environment variable)

The VUE_APP_SERVER_ID variable refers to the server ID that needs to be deployed currently is 0.

VUE_APP_SERVER_ID=0

In the project root directory, create the deploy/ file

The file functions are as follows:

(1) Read env environment variables

const fs = require('fs')
const path = require('path')
// Path of env environment variableconst envPath = (__dirname, '../.env')
// env objectconst envObj = parse((envPath, 'utf8'))
const SERVER_ID = parseInt(envObj['VUE_APP_SERVER_ID'])

function parse (src) {
 // parse the file with KEY=VAL const res = {}
 ('\n').forEach(line =&gt; {
  // matching "KEY' and 'VAL' in 'KEY=VAL'
  const keyValueArr = (/^\s*([\w\.\-]+)\s*=\s*(.*)?\s*$/)
  // matched?
  if (keyValueArr != null) {
   const key = keyValueArr[1]
   let value = keyValueArr[2] || ''

   // expand newlines in quoted values
   const len = value ?  : 0
   if (len &gt; 0 &amp;&amp; (0) === '"' &amp;&amp; (len - 1) === '"') {
    value = (/\\n/gm, '\n')
   }

   // remove any surrounding quotes and extra spaces
   value = (/(^['"]|['"]$)/g, '').trim()

   res[key] = value
  }
 })
 return res
}

(2) Define multiple server accounts and export the current environment server account according to SERVER_ID

const SERVER_LIST = [
 {
  id: 0,
  name: 'A-Production Environment',
  domain: '',
  host: '',
  port: 22,
  username: 'root',
  password: 'xxxxxxx',
  path: '/usr/local/www/xxx_program/'
 },
 {
  id: 1,
  name: 'B-Test Environment',
  domain: '',
  host: '',
  port: 22,
  username: 'root',
  password: 'xxxxxxx',
  path: '/usr/local/www/xxx_program_test/'
 }, 
]

 = SERVER_LIST[SERVER_ID]

3. Create an automated deployment script (using scp2 library)

In the project root directory, create the deploy/ file

const scpClient = require('scp2')
const ora = require('ora')
const chalk = require('chalk')
const server = require('./products')
const spinner = ora('Releasing to production server...')
()
('dist/', {
 host: ,
 port: ,
 username: ,
 password: ,
 path: 
}, function(err) {
 ()
 if (err) {
  (('Release failed.\n'))
  throw err
 } else {
  ((' Success! successfully published to the production server! \n'))
 }
})

4. Add the scripts command in , with the custom name "deploy"

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "deploy": "npm run build && node ./deploy"
 }

V. Perform deployment tasks

Execute the npm run deploy command in the root directory of the project, or use the vue ui control panel to execute the deploy task, and you can automatically package and deploy to the online server

Note: To switch the deployed server, just modify the server ID in the .env file and then execute the deploy task.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.