Packaging front-end projects

Take my own project as an example

  1. In the project root pathvue.config.jsThe basic URL for deploying application packages is configuredpublicPathIf this parameter is not configured, the default value ispublickPath:"/";
module.exports = {
  publicPath: "/",
};
Copy the code
  1. In order to unifyvue-routerThe routingbaseandpublickPath, can be written like this:
const router = new VueRouter({
  mode: 'history'.base: process.env.BASE_URL,
  routes
})
Copy the code

After the front-end project is packaged, you need to put the files in the packaged dist onto the server and then configure nginx

Configure nginx on the server (Linux)

Because my project is using Tencent cloud server (centos6.5), so I will use this as an example

Download and install nginx

Reference: www.runoob.com/linux/nginx…

  1. Install compilation tools and libraries
yum -y install make zlib zlib-devel gcc-c++ libtool  openssl openssl-devel
Copy the code
  1. You need to install the PCRE first

PCRE enables Nginx to support Rewrite functionality.

[root@bogon src]# cd /usr/local/src/
[root@bogon src]# wget http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz
Copy the code
  1. Decompress the Installation Package
[root@bogon SRC]# tar ZXVF pcl-8.35.tar.gzCopy the code
  1. Go to the installation directory to compile the installation
[root@bogon SRC]# CD pre-8.35 [root@bogon pre-8.35]#./configure [root@bogon pre-8.35]# make && make installCopy the code
  1. View the PCRE version
[root @ bogon pcre 8.35] # pcre - config - versionCopy the code

  1. Download, compile and install nginx
[root @ bogon SRC] # CD/usr/local/SRC / [root @ bogon SRC] # wget HTTP: / / http://nginx.org/download/nginx-1.18.0.tar.gzCopy the code

Decompress the Installation Package

[root@bogon src]# tar zxvf nginx-1.18.0.tar.gz
Copy the code

Going to the installation directory

[root @ bogon SRC] # CD nginx - 1.18.0Copy the code

Compile the installation

[root @ bogon nginx - 1.18.0] #. / configure -- prefix = / usr/local/webserver/nginx - with - http_stub_status_module --with-http_ssl_module --with-pcre=/usr/local/ SRC /pcre-8.35 [root@bogon nginx-1.18.0]# make [root@bogon nginx-1.18.0]# make installCopy the code
  1. Check whether the nGINX version is successfully installed
[root @ bogon nginx - 1.18.0] # / usr/local/webserver/nginx/sbin/nginx - vCopy the code

Installation succeeded!!

Configure nginx and set up the cloud server

  1. Configure nginx

Put the packaged front-end project in the nginx installation directory => HTML, then go to the nginx installation directory =>conf=>nginx.conf, edit the nginx.conf file vi nginx.conf and replace this section with this:

Change it to this:

    location / {
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
Copy the code

Save the file :wq

Note: SPA is a model of a web application or web site where all user interaction is done by dynamically rewriting the current page. No matter how many pages we apply, the builder will only produce an index.html. When we refresh the page when we enter a child route, the Web container will appear 404 when there is no corresponding page.

Try_files $uri $URI / /index.html; try_files $uri $URI / /index.html;

If the front-end project is routed in History mode, the default configuration may refresh the page 404. For details, see vue3js.cn/interview/v…

Vue-cli official document: cli.vuejs.org/zh/config/#…

  1. Start the nginx
/usr/local/webserver/nginx/sbin/nginx
Copy the code
  1. Set an open entry for cloud server security group rules

Find the cloud server console and click to set the security group configuration rules

Run the chkconfig iptables off command to disable the firewall

Enter the public NETWORK ID address to view the result

At this point, you are done!!

Common commands

/ usr/local/webserver/nginx/sbin/nginx - # s reload reload the configuration file/usr/local/webserver/nginx/sbin/nginx -s reopen # restart nginx / usr/local/webserver/nginx/sbin/nginx - # s stop stop nginx chkconfig closed firewall iptables off # / usr/local/webserver/nginx/sbin/nginx - t # check nginx configuration file. The conf commandCopy the code

Write in the last

My name is AndyHu and I am currently a front-end brick removal engineer.

If there are any mistakes in this post, feel free to correct them in the comments section. If this post has helped you, feel free to like or follow

Let the soul control their own skin is the true freedom!!