Deploy vue project on nginx (detailed tutorial)

vue-router defaults to hash mode, using the hash of the URL to simulate a complete URL. When the URL changes, the page will not be reloaded. This article mainly introduces the deployment of vue projects on nginx (history mode). Friends who need it can refer to

vue-router. The default is hash mode. Use the hash of the url to simulate a complete url. When the url When changing, the page will not reload. But if we don’t want to hash paths ending with #, we can use the routing history mode. For example, the following URL:

If the hash mode is used, the access becomes http://localhost:8080/bank/page/count/#/. If the routing uses history, the access path becomes It becomes as follows:

http://localhost:8080/bank/page/count This is it;

The routing configuration is as follows: We still take the vue-cli project as an example:

The code in src/router/index.js is as follows:

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

const router = new Router({
 mode: 'history', // 访问路径不带井号 需要使用 history模式
 base: '/bank/page', // 基础路径
 routes: [
  {
   path: '/count',
   name: 'count',
   component: resolve => require(['@/views/count'], resolve) // 使用懒加载
  }
 ]
});

However, this mode of history requires background configuration support. For example:

When we go to the homepage of the project, everything is normal and can be accessed, but when we refresh the page or directly access the path, 404 will be returned. That is because in history mode, it is only dynamic. Using js to operate window.history to change the path in the browser address bar does not initiate an http request. However, when I enter the address directly in the browser, I must initiate an http request to the server, but this target is on the server. It does not exist, so 404 will be returned. How to solve it? We can now forward all requests to http://localhost:8080/bank/page/index.html.

1: The configuration on the apache server is as follows:

1. If we are using apache as the web server now, we need to enable it. htaccess support:

Add the following to the file and everything will be normal

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /bank/page/index.html [L]
</IfModule>

The function of apache above is to forward all requests that do not exist on the server to index.html , so that it can be accessed directly through various URLs.

Note:

1. RewriteRule . /bank/page/index.html [L] This code; you need to add /bank in front /page/, because I added the path /bank/page/ in the routing configuration base, otherwise it will not match.

2. In the vue-cli project, you need to modify the assetsPublicPath under the build in config/index.js: '/bank/page/'. If you use a relative path, the

chunk file will report an error. Not found.

3. Create a new .htaccess file in the www/bank/page directory of apache. You need to modify the RewriteRule to /bank/page/index.html, otherwise the server will directly report a 404 error when refreshing the page.

4. Modify the httpd.conf file and enable the rewrite_module function.

5. LoadModule rewrite_module libexec/apache2/mod_rewrite.so, remove the previous

#6. Then find the line of AllowOverride None and change it to AllowOverride All to make the .htaccess file Take effect.

2: The configuration on the nginx server is as follows: vue-cli Execute the packaging command:

npm run build

Package as above , generate a dist folder, copy the files in this folder directly to the nginx server directory, and then you can open the project, but only the home page can be seen. Refreshing the page will also result in 404. The reason is the same as above, so you need to open it in nginx The server configuration jumps all paths or folders and redirects to the homepage index.html: this way you can find the route.

nginx server configuration is as follows: 1. First log in to the server.

2. Enter the directory /etc/usr/local/nginx/conf/;

Execute the command:

2-1 cd /etc/ and press Enter

2-2 cd /usr/ Enter

2-3 cd loacl/ Enter

2-4 cd nginx Enter

2-5 cd conf Enter

2-6 vi nginx_v4.conf. Enter the nginx file and create a new project. The relevant configuration is as follows:

For example, our current domain name address is accessed like this: http://aa.xx .com/bank/page/count, the following configuration is required:

server {
  listen 443;   # 监听本机所有ip上的 443 端口
  listen 80;   # 监听本机所有ip上的 80 端口
  server_name aa.xx.com; # 域名地址
  access_log /data/www/logs/nginx/aa/access.log main; # 新建日志文件
  include nginx_xx.conf; 
  /* 下面是多个location 用于配置路由地址 */
  location / {
   proxy_pass http://aa/;
   include nginx_proxy.conf;
  }
  location /bank/page/ {
   try_files $uri $uri/ /bank;
  },
  /* http://aa.xx.com/bank2/page/count 有多个不同的地址 就加一个如下这个配置 */
  location /bank2/page/ {
   try_files $uri $uri/ /bank2;
  }
  error_page 500 502 503 504 /502.html;
  location = /50x.html {
   root  html;
  }
 }

Syntax: try_files file ... uri or try_files file ... = code

Default value: None

Scope: server location

Its function is to check whether the files exist in order and return the first found file or folder (end Add a slash to indicate a folder), if all files or folders cannot be found, an internal redirection will be performed to the last parameter.

It should be noted that only the last parameter can cause an internal redirection, and the previous parameters only set the pointing of the internal URI. The last parameter is the fallback URI and must exist, otherwise an internal 500 error will occur. Named locations can also be used in the last parameter. Unlike the rewrite directive, if the fallback URI is not a named location then the

args are not automatically retained. If you want to retain the args, you must explicitly state it.

Syntax: location [=|~|~*|^~|@] /uri/ { … }

Default value :None

Scope:server

location指令是用来为匹配的URI进行配置，URI即语法中的"/uri/"，可以是字符串或正则表达式。但如果要使用正则表达式，则必须指定前缀。 [@] 即是命名location，一般只用于内部重定向请求。

3. 设置成功后需要重启：nginx重启命令；在 /etc/usr/local/nginx/conf/ 目录下, cd ../ 然后进入sbin目录下 cd sbin 接着运行命令 ./nginx -s reload 重启后即可生效。

4. 在/data/www/logs/nginx/aa/目录下 新建 access.log 文件。

然后nginx保存和退出命令 :wq

直接退出的命令是 :q

5. mac系统下 自带 apache2服务器，需要对apache2作反向代理；配置如下：

进入本地mac apache2配置；

命令：cd /etc/apache2

命令：sudo vi httpd.conf

<VirtualHost *:80>
 ServerName aa.xx.com
 ProxyRequests off
 Header set Access-Control-Allow-Origin *
 <Proxy *>
   Order deny,allow
   Allow from all
 </Proxy>
 <Location /aa>
   ProxyPass http://localhost:8896/
   ProxyPassReverse http://localhost:8896/
 </Location>
 // .... 更多配置省略
</VirtualHost>

然后进入 sbin目录下 启动服务 sudo apachectl start

重启命令如下 sudo apachectl restart

6. java服务端的配置如下 （如果是vm放到开发那边的话，开发那边需要如下处理下，如果页面vm不放在开发那边的话，下面的配置可以忽略）

在项目目录下 webapp/web-inf/view/ 新建文件夹 aa 和 include文件

aa文件下 新建index.vm

如下代码：

#parse("include/common.vm")
#@frame("xx管理",true)
#css(["${version}/business/aa/aa.css"]) // 打包后的css路径，具体看自己的路径
<p id="app"></p>
#js(["${version}/business/aa/aa.js"]) // 打包后的js路径，具体看自己的路径
#end

6-2 java开发需要配置一下：

1 设置路由： /aa 设置路由到 /aa/index.vm

2 这个include/common.vm有一个地址配置，是在disconf上配置的，你加一个

地址配置到 //aa.xx.com/aa/dist 上即可

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用vue2.0.js实现多级联动选择器

使用mint-ui实现省市区三级联动效果

使用vue实现二级路由设置方法

The above is the detailed content of Deploy vue project on nginx (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!