Ubuntu下使用nginx發布vue項目

1. Ubuntu18.04搭建nginx服務器

1.1 ubuntu安裝nginx

sudo apt update
sudo apt install nginx

1.2 配置防火牆

ps: 防火牆配置部分可根據情況選擇，一般不需要配置防火牆

sudo ufw app list

獲得應用程序配置文件的列表
可用應用程序：
CUPS
Nginx Full
Nginx HTTP
Nginx HTTPS
OpenSSH

Nginx有三個配置文件可用：Nginx Full、Nginx HTTP、Nginx HTTPS
Nginx Full ：此配置文件打開端口80（正常，未加密的網絡流量）和端口443（TLS / SSL加密流量）;
Nginx HTTP ：此配置文件僅打開端口80（正常，未加密的網絡流量）;
Nginx HTTPS ：此配置文件僅打開端口443（TLS / SSL加密流量）;

$ sudo ufw allow 'Nginx HTTP'
$ sudo ufw allow 'Nginx HTTPS'

輸入以下命令以啟動防火牆，據知有部分用戶是沒有啟動防火牆的，還是建議開啟

$ sudo ufw enable

輸入以下命令以查看防火牆狀態：

$ sudo ufw status

1.3 驗證Web服務器是否運行

sudo systemctl status nginx

可以通過瀏覽器輸入服務器IP測試
可以通過以下命令啟動nginx

sudo systemctl start nginx.service  //啟動服務
sudo systemctl enable nginx.service //跟隨系統啟動服務

1.4 配置nginx

修改 /etc/nginx/sites-enabled/default

/etc/nginx/sites-enabled/default 文件內容如下

##
# You should look at the following URL's in order to grasp a solid understanding
# of Nginx configuration files in order to fully unleash the power of Nginx.
# https://www.nginx.com/resources/wiki/start/
# https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/
# https://wiki.debian.org/Nginx/DirectoryStructure
#
# In most cases, administrators will remove this file from sites-enabled/ and
# leave it as reference inside of sites-available where it will continue to be
# updated by the nginx packaging team.
#
# This file will automatically load configuration files provided by other
# applications, such as Drupal or Wordpress. These applications will be made
# available underneath a path with that package name, such as /drupal8.
#
# Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples.
##

# Default server configuration
#
server {
	listen 80 default_server;
	listen [::]:80 default_server;

	# SSL configuration
	#
	# listen 443 ssl default_server;
	# listen [::]:443 ssl default_server;
	#
	# Note: You should disable gzip for SSL traffic.
	# See: https://bugs.debian.org/773332
	#
	# Read up on ssl_ciphers to ensure a secure configuration.
	# See: https://bugs.debian.org/765782
	#
	# Self signed certs generated by the ssl-cert package
	# Don't use them in a production server!
	#
	# include snippets/snakeoil.conf;

	root /home/ubuntu/Web/wangwang/dist;

	# Add index.php to the list if you are using PHP
	index index.html index.htm index.nginx-debian.html;

	server_name _;

	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		try_files $uri $uri/ =404;
	}

	# pass PHP scripts to FastCGI server
	#
	#location ~ \.php$ {
	#	include snippets/fastcgi-php.conf;
	#
	#	# With php-fpm (or other unix sockets):
	#	fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
	#	# With php-cgi (or other tcp sockets):
	#	fastcgi_pass 127.0.0.1:9000;
	#}

	# deny access to .htaccess files, if Apache's document root
	# concurs with nginx's one
	#
	#location ~ /\.ht {
	#	deny all;
	#}
}


# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
#	listen 80;
#	listen [::]:80;
#
#	server_name example.com;
#
#	root /var/www/example.com;
#	index index.html;
#
#	location / {
#		try_files $uri $uri/ =404;
#	}
#}

設置行：root /home/ubuntu/Web/wangwang/dist; 即root后面改為項目路徑即可。

1.5 重新加載配置文件

nginx -s reload

ps: 使用ubuntu命令時，命令前可能需要加sudo，來確保有足夠的操作權限

2. vue項目打包

vue項目使用npm run build 命令打包，詳細配置參考Vue CLI配置參考

這里需要特別說明的是：Vue設置路由History mode模式，打包 vue run build后頁面不顯示問題，404或者200但是空白頁，一般開發的單頁應用的URL都會帶有#號的hash模式，因為業務需求，或者不想使用帶#號，我們通常在路由index.js里面設置：

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

這樣URL不再會有#號，在Dev開發階段一切都是正常的，可是打包發布之后，訪問項目路徑：一片空白，js,css加載正常(雖然顯示訪問正常200，但是並沒有加載js，css文件，而是首頁)；這是因為你的項目打包dist並不是你服務器訪問的跟目錄，訪問是http://xxx.xxx.com/dist，跟目錄訪問：http://xxx.xxx.com；由於包並不是根目錄router路由無法找到路徑中的組件，解決方法：
1.最簡單的做法是在打包時注釋掉mode、base。