I vue front end project packaging
Developing projects using vscode
In the config directory of prod.env The IP address and port number of our back-end server are configured in the. JS file. Because this is in the actual deployment, the project must be deployed in the generation environment.
As shown in the figure:
prod.env.js
Index. In the config directory assetsPublicPath to be changed in JS file: '. /' Otherwise, the static file cannot be loaded correctly
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
}
Terminal input
npm run build
After running this command line, a dist folder will be automatically generated, which is the project file generated after packaging. Then put this folder on the server, and the path should be consistent with the nginx configuration path.
dist
II Install nginx on the Linux server and configure it
- Install the necessary software
1.1 connecting terminals using xshell
xshell
1.2 transferring files using xftp
xftp
- Installing nginx
2.1 download nginx
(two methods)
Method 1: Download nginx, and then use xftp to transfer it to the ECS
Method 2: command line download
http://nginx.org/download/ wget http://nginx.org/download/nginx-1.13.6.tar.gz
2.2 unzip nginx installation package
Enter nginx directory
tar -zvxf nginx-1.13.6.tar.gz cd nginx-1.13.6
2.4 make compile and install nginx
./configure --with-http_ssl_module --with-http_gzip_static_module make make install
2.5 startup procedure
cd /usr/local/nginx/sbin/ ./nginx
2.6 viewing operation status
ps aux | grep nginx
3. Agent address configuration of nginx front-end project
(the Vue project has set up a local agent. When deployed to Nginx, you need to use a reverse agent to solve the cross domain problem of the production environment)
vue project agent settings
Local agent address configuration file config / index js
proxyTable: {
'/api': {
target: 'https://api.weixin.qq.com ', / / request address
changeOrigin: true, //true indicates cross domain
secure: false,
ws: true,
logLevel: 'debug',
pathRewrite: {
'^/api': ''
}
},
'/token': {
target: 'http://139.9.xxx.77:8089 ', / / request address
changeOrigin: true, //true indicates cross domain
secure: false,
ws: true,
logLevel: 'debug',
pathRewrite: {
'^/token': ''
}
}
},
nginx proxy settings
Configure nginx in the / usr/local/nginx/conf directory Conf file modification
(1) Modify root, (root is the storage path of the file after the project is packaged.)
location / {
root /home/www/dist;
index index.html index.htm;
}
(2) Set nginx reverse proxy (to solve the cross domain problem of production environment). The proxy style is as follows
See the reverse proxy details article to learn more about Nginx reverse proxy
location /api/ {
proxy_pass https://api.weixin.qq.com/;
add_header Content-Type "text/plain;charset=utf-8";
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST';
}
location /token/ {
proxy_pass http://139.9.xxx.77:8089/;
add_header Content-Type "text/plain;charset=utf-8";
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST';
}
The server part of the complete configuration file is as follows
server {
listen 8080;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /home/www/dist;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
location /api/ {
proxy_pass https://api.weixin.qq.com/;
add_header Content-Type "text/plain;charset=utf-8";
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST';
}
location /token/ {
proxy_pass http://139.9.xxx.77:8089/;
add_header Content-Type "text/plain;charset=utf-8";
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST';
}
}
4. Startup of conf configuration file
In practice, there may be multiple vue front-end projects in the server. At this time, we only need to repair the conf file separately. A front-end project corresponds to a conf file.
The conf start command is as follows:
Start project specified profile
cd /usr/local/nginx/sbin/ ./nginx -c conf/nginx_hwfm.conf
To view the startup process:
ps -ef|grep nginx_hwfm
Kill process:
kill -9 Process number
- nginx other common commands
(1) Start nginx:
cd /usr/local/nginx/sbin/ ./nginx
(2) View running status
ps aux | grep nginx
(3) Stop nginx
./nginx –s stop
(4) Check whether the configuration file is correct
./nginx –t
(5) View nginx version
./nginx -v
(6) Profile location
/usr/local/nginx/conf/nginx.conf
(7) Extension (nginx startup command under window)
cd MyDownloads\nginx-1.15.3 start nginx nginx -s stop nginx -s reload