current position:Home>[vue2-sgg VII] Vue export and deploy to nginx --- UI component library (element UI...)

[vue2-sgg VII] Vue export and deploy to nginx --- UI component library (element UI...)

2022-04-29 07:23:46xbd_ zc

7、 ... and ,Vue Deploy to Nginx

0, install nginx

Download from the official website nginx: download

Windows download Windows Version decompression

centos7 install

# Download installation package 
# Dependencies required for installation 
yum -y install pcre pcre-devel zlib zlib-devel openssl openssl-devel
# decompression 
tar -zxvf nginx-1.20.2.tar.gz
# Get into nginx Catalog 
cd nginx-1.20.2
# precompile 
#--prefix Is to specify the installation directory 
./configure --prefix=/opt/nginx
# compile 
# install 
make install
# function nginx
cd /opt/nginx/sbin/
# Check the process 
ps -ef|grep nginx
root     115792      1  0 14:40 ?        00:00:00 nginx: master process ./nginx
nobody   115793 115792  0 14:40 ?        00:00:00 nginx: worker process
root     116079  15539  0 14:40 pts/2    00:00:00 grep --color=auto nginx
# Unable to access closed firewall or open port 
systemctl stop firewalld.service                       # Temporary firewall 
systemctl disable firewalld.service                   # Permanently shut down firewall 
# to open up 80 port 
firewall-cmd --zone=public --add-port=80/tcp --permanent      #  to open up 80 port 
firewall-cmd --zone=public --remove-port=80/tcp --permanent   # close 80 port 
firewall-cmd --reload                                         #  Configuration takes effect immediately 
firewall-cmd --zone=public --list-ports                  # View open ports of firewall 

Common commands

# start-up 
# Start the configuration file in a specific directory 
nginx -c / Specific directory /nginx.conf
# Reload configuration 
/opt/nginx/sbin/nginx -s reload
# stop it 
/opt/nginx/sbin/nginx -s stop
# Check if the configuration file is correct 
/opt/nginx/sbin/nginx -t
# Check that the configuration file for a specific directory is correct 
nginx -t -c / Specific directory /nginx.conf
# Out of Service 
/opt/nginx/sbin/nginx -s quit 

To configure nginx service ( Boot from boot )

vim /etc/systemd/system/nginx.service # establish service file


Description=The Nginx HTTP Server

PIDFile=/opt/nginx/logs/  # Modify the path to the path corresponding to your own system 
ExecReload=/opt/nginx/sbin/nginx -s reload
ExecStop=/opt/nginx/sbin/nginx -s stop


Boot from boot

systemctl daemon-reload
systemctl enable nginx    # Boot from boot 
systemctl disable nginx.service  # Turn off and start automatically 
systemctl start nginx.service   # Turn on 
systemctl stop nginx.service    # close 
systemctl reload nginx.service  # Reload configuration 
systemctl status nginx.service  # Check the status 


1, function build command

vue-cli-service build


2, Generate resource directory dist, Copied to the nginx in

Download from the official website nginx: download

# stop it 
nginx -s quit 
# restart 
nginx -s reload  

hold dist Put the resources in the directory into HTML Under the table of contents


3, Access test


4,history New newspaper in mode 404

  • Use the path as a resource to find , Can't find


modify nginx.conf

server–>location Add

try_files $uri $uri/ @router;

server {
		listen 8088;
		server_name xxx;
		access_log logs/access.log;
		error_log logs/error.log;
		location / {
			# root directory 
			root E:\static\disthistory;
			#history add to , hash Don't add 
			try_files $uri $uri/ @router;
			# Point to 17 Yes @router
			index index.html;
		# Corresponding 11 Yes @router, The main reason is that the route resource is not a real path , So we can't find the specific documents 
		# Therefore need rewrite To index.html in , Then it's handed over to the router to process the request resource 
		location @router {
			rewrite ^.*$ /index.html last;

8、 ... and ,UI Component library (Element UI)

Mobile terminal is often used UI Component library

  1. Vant
  2. Cube Ul
  3. Mint UI

PC Common end UI Component library

  1. Element UI
  2. IView Ul

Element UI

npm install

Recommended npm Mode of installation , It can be better with webpack Packing tools are used with .

npm i element-ui -S


// introduce ElementUI Component library 
import ElementUI from 'element-ui';
// introduce ElementUI All styles 
import 'element-ui/lib/theme-chalk/index.css';
// application ElementUI

Introduce on demand

With the help of babel-plugin-component, We can just introduce the components we need , In order to reduce the volume of the project .

First , install babel-plugin-component:

npm install babel-plugin-component -D

then , take .babelrc It is amended as follows :

The new scaffold is called babel.config.js

module.exports = {
  presets: [
    //"presets": [["es2015", { "modules": false }]],es2015 Report errors 
    ["@babel/preset-env", {
     "modules": false }]
  "plugins": [
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"

Next , If you only want to introduce some components , such as Button and Select, So you need to main.js Write the following in :

import Vue from 'vue';
import {
     Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(, Button);
Vue.component(, Select);
/*  Or write as  * Vue.use(Button) * Vue.use(Select) */

new Vue({
  el: '#app',
  render: h => h(App)

Operation error reporting

If appear Error: Cannot find module 'xxx'

Just install npm i xxx


install babel-plugin-component

npm i babel-plugin-component


install babel-preset-es2015

npm i babel-preset-es2015
es2015 The problem of


modify babel.config.js Of es2015 by @babel/preset-env

module.exports = {
  presets: [
    ["@babel/preset-env", {
     "modules": false }]
  "plugins": [
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
Cannot find module '@babel-preset-env/babel-preset' solve : Switch to ['@babel/env', { modules: false }]

copyright notice
author[xbd_ zc],Please bring the original link to reprint, thank you.

Random recommended