一、安装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

巴特西

Centos7 使用nginx部署vue项目

一、安装nginx

二、部署时可能会发现资源路径不对 ,只需修改文件资源路径

三、Vue项目打包

四、将打包后的dist文件夹上传至服务器

五、配置Nginx的conf文件

六、使配置生效

七、访问ip地址查看效果

八、注意:需要开启你服务器所有的安全组权限

九、查看页面

最新文章

热门文章