Centos7 使用nginx部署vue項目

一、安裝nginx

#設置源
sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

#安裝
yum install -y nginx

#啟動服務
systemctl start nginx.service

#關閉服務
systemctl stop nginx.service

#開機自啟
systemctl enable nginx.service

二、部署時可能會發現資源路徑不對 ,只需修改文件資源路徑

更改config文件夾下index.js(config -> index.js -> build對象)資源發布路徑

# change code like this
assetsPublicPath: './',

# An highlighted block
build: {
   // Template for index.html
   index: path.resolve(__dirname, '../dist/index.html'),

   // Paths
   assetsRoot: path.resolve(__dirname, '../dist'),
   assetsSubDirectory: 'static',
   assetsPublicPath: './',
     /**
    * Source Maps
    */

   productionSourceMap: true,
   // https://webpack.js.org/configuration/devtool/#production
   devtool: '#source-map',

更改build文件夾下的utils.js代碼

# add code block
publicPath:'../../'

# An highlighted block
if (options.extract) {
     return ExtractTextPlugin.extract({
       use: loaders,
       fallback: 'vue-style-loader',
       publicPath:'../../'
     })
   } else {
     return ['vue-style-loader'].concat(loaders)
   }

三、Vue項目打包

# 打包正式環境
npm run build:prod

# 打包預發布環境
npm run build:stage

四、將打包后的dist文件夾上傳至服務器

# 遠程上傳 或 通過ftps工具上傳
本次上傳項目路徑為 /usr/local/webapp/

五、配置Nginx的conf文件

vim /etc/nginx/nginx.conf

#在http{}修改如下
server {
 listen 80;
 server_name ip; #服務器ip或者域名

 # 注意設定 root路徑是有dist的
 location / {
   root /usr/local/webapp/dist;
   index /index.html;
 }

 #跨域 ip和port自行替換
 location /adminApi {
   proxy_pass http://ip:port;
 }

}

六、使配置生效

nginx -s reload
nginx -s stop
nginx

七、訪問ip地址查看效果

http://ip   #此處ip是你的服務器ip地址,例如:0.0.0.0

八、注意:需要開啟你服務器所有的安全組權限

九、查看頁面