# Front-end deployment

Recommended to deploy to nginx, not recommended to deploy to iis (the difficulty factor is not suitable for new hands)

# Package the project

Whether you deploy your project to nginx or another server, you need to package your project first

# Package the official environment

npm run build:prod

# Package the pre-release environment

npm run build:stage

After the build is successfully packaged, a dist folder is created in the root directory, which contains the packaged files, usually static files such as .js, .css, index.html, and so on.

Usually, the static files in the dist folder are published to your nginx or static server, where index.html is the entry page of the backend service.

Environment variables (add: newbies don't need to look here)

All test environment or official environment variables are configured in .env.development and other .env.xxxx files.

They are injected globally via the webpack.DefinePlugin plugin.

Environment variables must start with VUE_APP. E.g.: VUE_APP_BASE_API You can get it in your code as follows: console.log(process.env.VUE_APP_xxxx)

Note that

Vue3 starts with VITE console.log(import.meta.env.VITE_APP_XXXX)

#Configure nginx Add the following configuration file to the ngnix/config/nginx.conf http module Create a folder zradmin in the html directory of the nginx installation directory or another directory Upload the dist folder of the ZR.Vue project to the zradmin folder you just created (note: vue3 is a separate project) Visit http://域名/外网IP:port in your browser

server {
	#Modify the port to listen on
	listen 80.
	#Modify the domain name or IP address to bind to
 	server_name domain/extranet IP; # Example: www.xxx.com/0.0.0.0

	# charset koi8-r.
	access_log logs/logs.access.log main; # Note: To remove the comment from the main log formatting statement in the http module

	# file storage access parameter setting access path needs to be set to http://www.xxx.com/uploads
	# Don't ignore it, just use it as a learning record
	location /uploads {
		# Set the resource storage path address
		root D:\home\website.
		# /home/website under linux

		autoindex on.
	}

	# vue project configuration
	location / {
		root html/zradmin/dist.
		index index.html.
		# Avoid 404
		try_files $uri $uri/ /index.html.
	}

	# redirect server error pages to the static page /50x.html
	error_page 500 502 503 504 /50x.html.
	location = /50x.html {
		root html.
	}
}

# Secondary Directory Deployment

nginx configuration

server {
	#Modify the port to listen on
	listen 80.
	#Modify the domain name or IP address to bind to
	server_name [www.yourdomain.com] 0.0.0.0.

	# charset koi8-r.
	access_log logs/logs.access.log main.

	# vue project configuration
	location /admin {
		alias html/zradmin/dist.
		index index.html.
		try_files $uri $uri/ /admin/index.html.
	}
}

Package configuration Modify the .env.production key in the root of the front-end project as follows Vue2 Vue3 VUE_APP_ROUTER_PREFIX = "/admin".

# Restart nginx

Type http://www.yourdomain.com/admin into your browser