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 
wget http://nginx.org/download/nginx-1.20.2.tar.gz
# 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 
make
# install 
make install
# function nginx
cd /opt/nginx/sbin/
./nginx
# 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 
/opt/nginx/sbin/nginx
# 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

nginx.service

[Unit]
Description=The Nginx HTTP Server
After=network.target remote-fs.target nss-lookup.target

[Service]
Type=forking
PIDFile=/opt/nginx/logs/nginx.pid  # Modify the path to the path corresponding to your own system 
ExecStart=/opt/nginx/sbin/nginx  
ExecReload=/opt/nginx/sbin/nginx -s reload
ExecStop=/opt/nginx/sbin/nginx -s stop
PrivateTmp=true

[Install]
WantedBy=multi-user.target

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 https://youzan.github.io/vant
2. Cube Ul https://didi.github.io/cube-ui-
3. Mint UI http://mint-ui.github.io

PC Common end UI Component library

1. Element UI https://element.eleme.cn
2. IView Ul https://www.iviewui.com-

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

// introduce ElementUI Component library 
import ElementUI from 'element-ui';
// introduce ElementUI All styles 
import 'element-ui/lib/theme-chalk/index.css';
// application ElementUI
Vue.use(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: [
    '@vue/cli-plugin-babel/preset',
    //"presets": [["es2015", { "modules": false }]],es2015 Report errors 
    ["@babel/preset-env", {
     "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
    
        "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.name, Button);
Vue.component(Select.name, 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: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", {
     "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
    
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

Cannot find module '@babel-preset-env/babel-preset' solve ： Switch to ['@babel/env', { modules: false }]