Shulou(Shulou.com)06/03 Report--

Xiaobian to share with you how Vue project packaging deployment, I believe most people do not know how, so share this article for your reference, I hope you read this article after a lot of gains, let us go to understand it together!

I. Preparation--Server and nginx usage 1. Prepare a server

I have ubuntu, linux operating system is similar. How can I break without a server?

If you just want to experience it, you can try the free trial package of Cloud Virtual Machine of each big factory, such as Huawei Cloud Free Trial. The relevant operations in this article are completed on Huawei Cloud. However, if you want to practice from time to time, I think you can buy a Cloud Virtual Machine, such as Huawei Cloud or Alibaba Cloud above, which is quite reliable. My personal website is deployed in Alibaba Cloud. You can click on my promotion link to buy it. Recently, there are activities to buy less than 100 yuan/year for the first time.

2. nginx installation and startup

Light and simple, this part is not too much to repeat (after all, there are a lot of related tutorials on the Internet), under normal circumstances only the following two instructions:

#Install, check with nginx -v after installation, if the output nginx version information indicates successful installation sudo apt-get install nginx#start sudo service nginx start

After startup, under normal circumstances, directly access http://server ip or http://domain name (the server used for testing in this article does not have a domain name configured, so ip is used. For this article, there is not much difference between domain name and ip) and you should be able to see the default page of nginx server. If you cannot access it, it is possible that the default http service port (port 80) of your Cloud Virtual Machine is not open to the public. Configure it in the server security group.

3. Understanding nginx: Modify nginx configuration to allow nginx server proxy for files we create

Check the configuration of nginx. The configuration files under linux system are usually stored in/etc directory. The configuration files of nginx are located in/etc/nginx folder. Open the file/etc/nginx/sites-available/default (nginx can have multiple configuration files, and usually we configure nginx to modify this file):

You can see that by default, the root directory of the nginx proxy is/var/www/html. Enter http://server ip to access the files under this folder. It will find the files accessed by default according to the configuration value of index, such as index.htm.

We can change the root value to modify the folder of the nginx service agent:

Create the folder/www and create index.html with the string "Hello world"

mkdir /wwwecho 'Hello world' > /www/index.html

Change the root value to/www

sudo nginx -t Check if nginx configuration is correct

Load nginx configuration: sudo nginx -s reload

Visit the page again and find that the content of the page has changed to the index.html:

II. Vue project packages synchronization files to remote server 1. packaged

By default, for projects created using vue-cli, the script in package.json should have been configured with the build command, and you can directly execute yarn build or npm run build.

2. Sync to remote server

We deploy Vue projects using nginx, which essentially synchronizes the packaged content of Vue projects to folders pointed to by nginx. The previous steps have explained how to configure nginx to point to the folder we created. The remaining problem is how to synchronize the packaged files to the specified folder on the server, such as/www created in the previous step. Syncing files can be done using the scp command in git-bash or powershell, or rsync command if you are developing in linux:

scp -r dist/* root@117.78.4.26:/www or rsync -avr --delete-after dist/* root@117.78.4.26:/www

Note that here and in the following steps root uses user remote synchronization, and root and ip should be replaced according to your specific situation (ip for your own server IP).

For convenience, you can add a push command to the package.json script, using yarn as an example (if you use npm, then the yarn in the push command can be changed to npm run):

"scripts": { "build": "vue-cli-service build", "push": "yarn build && scp -r dist/* root@117.78.4.26:/www" },

This allows you to run yarn push or npm run push directly. However, there is also a small problem, which is that the command execution requires the root password of the remote server (here root is used to connect to the remote, you can use other users, after all, root user privileges are too high).

To avoid having to enter the root password every time we execute, we can synchronize the local ssh to the authorized_keys file on the remote server.

3. Synchronous SSH key

Generate ssh key: ssh key can be generated by executing ssh-keygen with git bash or powershell. Will ask the generated key storage address, directly enter the line, if it already exists, will ask whether to overwrite:

Syncing ssh key to remote server using ssh-copy-id command

ssh-copy-id -i ~/.ssh/id_rsa.pub root@117.78.4.26

After entering the password, you don't need to enter the password again after synchronization. In fact, ssh_key is synchronized to the server (here is the root user's home directory)~/.ssh/authorized_keys file:

Of course, you can also manually copy the local ~/.ssh/id_rsa.pub (note the public key at the end of the pub) file and append the contents to the server ~/.ssh/authorized_keys (from the name, you can see that this file can store multiple ssh keys)

Note: The root user is used throughout, so there is no file operation permission problem. If your folder creator is not a telnet user, there may be a problem with file synchronization failures, in which case the remote server needs to modify the folder's read and write permissions (command chmod).

Created a test project (click on this link to view it on gihub)[1] Try it, pack it, upload it with one command:

Check it out and see what we know:

At this point, publishing Vue projects under normal circumstances is over, followed by publishing under non-domain root paths and history routing patterns.

Third, non-domain name root path publishing

Sometimes the same server may be divided into multiple different projects under the same port according to the directory. For example, we hope that the project will be deployed to http://a.com/test, so that visiting http://a.com/test will access the home page of the project, and the address other than the test prefix will access other projects. At this point, you need to modify the nginx configuration and Vue packaging configuration.

1. nginx configuration

All you need to do is add a location rule that assigns access paths and specifies access folders. We can point/test to the previously created/www folder, where alias is needed because the folder name and access path are inconsistent:

If the folder name is consistent with the access path and is test, then you can configure it with root here:

Putting/test before/here means that/test will be matched first when routing in. If an item in the root path/has a child route/test, http://xxxx/test will only access the item in/www and not the child route.

2. project configuration

In order to solve the problem of incorrect resource paths after packaging, you need to configure publicPath in vue.config.js. There are two ways to configure publicPath: configure publicPath to./ and/or testing:

Update nginx configuration, you can access it normally after release. The two configurations are different, and we'll look at their differences next. If you do not configure the project, direct publishing access will cause problems such as JS, CSS and other resources that cannot be found, resulting in blank pages:

The reason for this problem is that the resource reference path is incorrect. As you can see from the page review element, the js referenced by the page are all referenced from the root path:

The requested URL/css/img/static was not found on this server.

For both configurations, see how they work:

publicPath is configured as./, The resource reference path after packaging is relative:

publicPath is configured as/test, and the relative path of the packaged resource is an absolute path starting from the root directory of the domain name:

Both configurations correctly find JS, CSS, and other resources. However, there is still a problem, that is, static resources in static will still not be found.

3. The static resource referenced by the absolute path cannot be found

Because static resources under public are not processed by webpack during packaging, we need to refer to them via absolute paths. This is a headache when deploying to a non-domain root path, and you need to prefix each referenced URL with process.env.BASE_URL (which corresponds to the publicPath configured above) to make the resource accessible. We can bind this variable value to Vue.prototype in main.js so that every Vue component can use it:

Vue.prototype.$ pb = process.env.BASE_URL

Use in templates:

However, a more vexing problem with no good solution is the use of static resources under the public folder in the style section of the component:

If you need to use images, etc. as background images, try to use them inline, as in templates.

If you need to import style files, interpolate them in index.html.

For static resource problems, vue-cli recommends importing resources as part of your module dependency graph (i.e., into assets, using relative path references) as much as possible. Avoiding this problem also brings other benefits:

IV. History Mode Deployment

By default, Vue projects use hash routing patterns, which include a #in the URL.# The hash part of the routing address is the hash part of the routing address. Under normal circumstances, when the browser address bar address changes, the browser will reload the page, but if it is a hash partial modification, then it will not, this is the principle of front-end routing, allowing partial updates based on different routes without refreshing the entire page. H5 adds the pushState interface of history, which also allows front-end operations to change routing addresses without triggering page refresh. History mode is implemented by using this interface. Therefore, history pattern can be used to remove the #sign from the route.

1. project configuration

Configure the mode option and the base option in the vue-router routing option. The mode option is configured as 'history'; if the deployment is to a non-domain root directory, the base option needs to be configured as the publicPath value configured above (Note: In this case, publicPath must be configured in the form of absolute path/test, not relative path./)

2. nginx configuration

For history mode, suppose the project is deployed to the/test directory under the domain name. When accessing http://xxx/test/about, the server will look for the about subdirectory or file under the directory pointed to by/test. Obviously, because it is a single-page application, there will be no directory or file a, which will lead to 404 error:

We need to configure nginx so that in this case, the server can return index.html of the single-page application, and then the rest of the route resolution is left to the front end to complete.

The meaning of this configuration is, get an address, first try to find the corresponding file according to the address, can't find the folder corresponding to the address, and then return to/test/index.html. Open the about address again, refresh the page will not 404:

3. history pattern deployed to non-domain root path

For deployment under a non-domain root directory, publicPath must be configured first. The point that needs attention has actually been mentioned earlier, that is, in this case, relative paths cannot be used./ Or empty string configuration publicPath. Why is that?

The reason is that it will lead to the performance of router-link, etc., use the test project [2] to package and release with two configurations respectively, and review the elements to see the difference. There are two router-links on the page, Home and About:

The results of packaging the two configurations are as follows.

publicPath configured as./ Or empty string:

publicPath configured as/test:

publicPath is configured as a router-link of the relative path, and the address becomes the address under the relative root domain name after packaging, which is obviously wrong, so the deployment of non-domain root path should configure publicPath as a complete prefix path.

That's all for "Vue project how to package deployment", thanks for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.