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。