Problems encountered when releasing VUE project and solutions

—- Release —-

Vue configuration API

vue.config.js API

Front-end engineering related commands

1. Install CNPM

(CNPM and NPM are the same thing, the difference is that the dependency used in the download address is different, CNPM download dependency are from taobao image)

$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.orgCopy the code
2. Create a VUE project
If you want to create vue-1.0, add #1.0 $vue init after the project name webpack vue-element-adminCopy the code

You can also use IDEA -> FILE -> NEW PROJECT -> STATIC WEB -> VUE

3. Run the project using the Node container
$CD [project root dir] $NPM run [dev] #dev is optionalCopy the code
4. Packaging
$ cd [project root dir]
$ npm run buildCopy the code

After running the command, the dist file is generated in the current root directory, which is the project distribution package

Nginx deployment vue

1. Install nginx

. Not in this article

2. Modify the nginx. Conf

$ vim nginx.confCopy the code

Locate the corresponding port, listen to the server property, and add the following configuration to it

The location/API / {proxy_pass http://192.168.1.108:8080/; } location / {root HTML /dist;} location / {root HTML /dist; Try_files $uri $uri/ /index.html; try_files $uri $uri; /index.html, vue can use location.href to determine where to route to.Copy the code

—- Pit climb —-

The client

1. Vue’s publicPath should be set to/instead of./ (the default vue is /, but if the nginx proxy has a context, it should be set to /{contextPath}).

2. The devServer configuration of vue is invalid when the nginx location is set to /. This problem was solved for a long time, because the front end replaced/API with the interface address, after publishing to nginx, the interface address is always the server address. On second thought, it should be nGINx

3.2018-08-20 Supplement, this is a very big pit, because at the beginning there was only one front-end engineering, so there was no problem according to the above configuration. Later, due to the needs of the project, there were more front-end engineering to be created, but the token must be of the same origin to share, so my first idea was to use Nginx as the reverse proxy. Before publishing multiple front-end projects in a single Nginx service, check the VUE website and the recommended route configuration isto use history mode and then configure nginx:

location / { root html/dist; #dist is placed in the same HTML folder as nginx.conf. # all requests are forwarded to /index.html, where vue can use location.href to determine where to route. HTML try_files $uri $uri/ /index.html; }Copy the code

However, since multiple projects have been added, location can no longer use /, so I split the location configuration into two:

location /projectManager {
    root html/projectManager/dist;
    try_files $uri $uri/ /index.html;
}

location /systemManager {
    root html/systemManager/dist;
    try_files $uri $uri/ /index.html;
}Copy the code

According to the previous configuration instructions (Crawl -> Client -> 1), if the agent has a context, then the front-end engineering must also synchronize the configuration of the context, /projectManager /systemManager/publicPath = /projectManager /systemManager/publicPath = /projectManager /systemManager/publicPath = /projectManager /systemManager Process.env.base_url), if not, set it to the value corresponding to location

After completing the configuration, I was pleased to release the project, open the web page, enter the systemManager project, reported 404, tear eye, after repeated investigation, locate the problem should be root tag, the changes are as follows

location /projectManager {
    alias html/projectManager/dist;
    try_files $uri $uri/ /index.html;
}

location /systemManager {
    alias html/systemManager/dist;
    try_files $uri $uri/ /index.html;
}Copy the code

The root and alias tags differ:

Root: request/systemManager HTML is actually to server/systemManager/dist/to find the resources in the systemManager

Alias: Requesting /systemManager actually goes to HTML /systemManager/dist/ on the server to find resources

After solving the BUG, in the request systemManager project page, successful display, heart and elated, F5 results, 404 T_T

After searching for a whole afternoon, I didn’t find the problem, so I googled it and finally found some useful information in a post: If multiple projects are published, the vUE cannot use history mode. The front-end routing mode must be modified using the default hash mode and republished. The page is displayed successfully and refreshed without 404 problems

The final configuration is as follows:

location /api/ { client_max_body_size 100m; Proxy_set_header Host $Host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_buffering off; Proxy_pass http://192.168.1.xxx:7777/; Location /projectManager {alias HTML /projectManager/dist; try_files $uri $uri/ /index.html; } location /systemManager { alias html/systemManager/dist; try_files $uri $uri/ /index.html; }Copy the code

The 2019-08-29 supplement

1. Environmental variables added to VUE project: Differences between mode and environmental variables: Model contains more than one environment variable, in the form of key = value exists, the vue pattern will be the default NODE_ENV value to replace the current model name, if you want to custom environment variables, should begin with VUE_APP_, otherwise not make cli.vuejs.org/zh/guide/mo…

The 2019-09-18 supplement

2. If you use the nginx proxy for two front-end node(VUE) services, F12 will always report an error: GET http://localhost/sockjs-node/info? t=1568791304370 net::ERR_CONNECTION_REFUSED

– sockjs-cli-dist – sockjs.js-1605 (self.xhr.send(payload);)

3. You can use the Nginx agent node service to facilitate hot deployment: (publicPath: /ck/projectManager in vUE project)

The location/ck/projectManager {proxy_pass http://192.168.1.99:8080/ck/projectManager; } the location/ck/systemManager {proxy_pass http://192.168.1.99:8081/ck/systemManager; } location / { rewrite ^ /ck/systemManager; }Copy the code

[Fixed] history cannot be used for multiple vue projects:

I didn’t find a way to configure history at first because I misunderstood the try_files property. Recently, a BUG on the line made me refocus on this issue: The lower version of Chrome sometimes loses hash information when using the window.location.reload() method, causing the page to sometimes lose its hash and redirect to the login page

exp: After entering the system, the home page will be displayed by default. At this time, if you repeatedly click the navigation button of [home page], the button will trigger a Reload () event. Sometimes the home page iframe can be rendered normally, and sometimes it will be redirected to the login page and directly access the routing address. But using the console, type location.reload() and this happens, you don’t have this problem with Oupeng, you don’t have this problem with older Versions of Chrome

You can enable the proxy service to support the multi-project History mode by modifying the following configuration

Correct use of try_files (note that the try_files configuration has been modified compared to the previous configuration)

location /projectManager { alias html/projectManager/dist; try_files $uri $uri/ /projectManager/index.html; } location /systemManager {alias HTML /systemManager/dist;  try_files $uri $uri/ /systemManager/index.html; $uri $uri/ if not, use the uri specified in the last parameter for internal redirection}Copy the code

Notes on try_files: Click to view

The service side

1. If location is set to/and the interface is not on the same machine as the current service, be sure to configure the interface proxy (note: the/must not be less after API).

The location/API / {proxy_pass http://192.168.1.108:8080/; }Copy the code

The/after the port number must not be less, because there is a difference between meaningless and absolute paths and relative paths are involved

—- Other knowledge —-

Difference between History and hash

Click to

The advantages and disadvantages of the adjustment of foreign exchange ratio to China

In terms of exports, it is good for exports. For example, one dollar is now worth 5 yuan. A pair of shoes costs 100 yuan domestically and 20 dollars abroad. If the RMB depreciates and becomes 10 dollars to the dollar, you can still sell 100 yuan shoes at home, you can still sell them at 10 dollars in the international market and get the same profit as selling 100 yuan shoes at home. In fact, you can still sell them at 20 dollars in the international market, so you can make more profit in the international market, which is good for export. Downside, if you are in the United States, the tuition is $10000 a year, in the case of 5 yuan for 1 dollar, ready to pay the tuition fee 50000 yuan to buy in the home, when the yuan depreciation, becomes the 10 yuan to the dollar, the same tuition of $10000, to prepare 100000 yuan, can increase the burden.

I think before the trade war, the devaluation of RMB would be beneficial to China, because China is a big exporter. But during the trade war, the devaluation of RMB and the riots in Hong Kong will only cause the stock market to run out of cash in large quantities. Moreover, the devaluation will also increase the daily expenses of ordinary people from the macro perspective

Why are there only 13 root DNS servers in the world

The result of the earlier DNS query was a 512-byte UDP packet. This package can hold up to 13 server addresses, so there are 13 root DNS servers worldwide, numbering from A.root-servers.net to m.root-servers.net.

Personal blog click to go