一、安装nginx

  1. #设置源
  2. sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
  3. #安装
  4. yum install -y nginx
  5. #启动服务
  6. systemctl start nginx.service
  7. #关闭服务
  8. systemctl stop nginx.service
  9. #开机自启
  10. systemctl enable nginx.service

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

更改config文件夹下index.js(config -> index.js -> build对象)资源发布路径

  1. # change code like this
  2. assetsPublicPath: './',
  1. # An highlighted block
  2. build: {
  3. // Template for index.html
  4. index: path.resolve(__dirname, '../dist/index.html'),
  5. // Paths
  6. assetsRoot: path.resolve(__dirname, '../dist'),
  7. assetsSubDirectory: 'static',
  8. assetsPublicPath: './',
  9. /**
  10. * Source Maps
  11. */
  12. productionSourceMap: true,
  13. // https://webpack.js.org/configuration/devtool/#production
  14. devtool: '#source-map',

更改build文件夹下的utils.js代码

  1. # add code block
  2. publicPath:'../../'
  1. # An highlighted block
  2. if (options.extract) {
  3. return ExtractTextPlugin.extract({
  4. use: loaders,
  5. fallback: 'vue-style-loader',
  6. publicPath:'../../'
  7. })
  8. } else {
  9. return ['vue-style-loader'].concat(loaders)
  10. }

三、Vue项目打包

  1. # 打包正式环境
  2. npm run build:prod
  3. # 打包预发布环境
  4. npm run build:stage

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

  1. # 远程上传 或 通过ftps工具上传
  2. 本次上传项目路径为 /usr/local/webapp/

五、配置Nginx的conf文件

  1. vim /etc/nginx/nginx.conf
  2. #在http{}修改如下
  3. server {
  4. listen 80;
  5. server_name ip; #服务器ip或者域名
  6. # 注意设定 root路径是有dist的
  7. location / {
  8. root /usr/local/webapp/dist;
  9. index /index.html;
  10. }
  11. #跨域 ip和port自行替换
  12. location /adminApi {
  13. proxy_pass http://ip:port;
  14. }
  15. }

六、使配置生效

  1. nginx -s reload
  2. nginx -s stop
  3. nginx

七、访问ip地址查看效果

  1. http://ip #此处ip是你的服务器ip地址,例如:0.0.0.0

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

九、查看页面

Centos7 使用nginx部署vue项目的更多相关文章

  1. CentOS7 安装nginx部署vue项目

    简单描述:代码开发完了,需要环境来运行测试.服务器上没有nginx,搞起搞起.   在Centos下,yum源不提供nginx的安装,可以通过切换yum源的方法获取安装.也可以通过直接下载安装包的方法 ...

  2. nginx部署vue项目

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...

  3. Docker镜像+nginx 部署 vue 项目

    一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西 ...

  4. nginx部署vue项目 解决方案

    给前端同事部署了web项目之后,访问发现除了index.html可以访问,其他的路径使用了“伪静态”.比如访问:http://localhost:8081/user/login,访问即报404错误,这 ...

  5. Centos+Nginx部署Vue项目

    1.项目打包生成dist文件夹 在项目根目录下打开cmd窗口,输入命令 npm run build //生成dist文件夹 2.将dist文件夹上传到centos7 使用scp命令或者用远程连接工具将 ...

  6. 关于nginx部署vue项目的两个问题

    首先我使用的是后端接口+前端vue的形式,这样就涉及到跨域的问题.我是这样配置的: server { listen 80; server_name www.liangyp.xyz;//访问网址 loc ...

  7. Nginx部署vue项目的配置

    . 官网下载 http://nginx.org/en/download.html 选择stable version nginx/Windows-1.14.1 pgp . 解压 然后配置环境变量,如果环 ...

  8. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  9. 在nginx上部署vue项目(history模式)--demo实列;

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

随机推荐

  1. dpwwn-01靶机渗透

    dpwwn-01 主机发现+端口扫描 发现3306端口,80端口. 访问80端口,进行目录爆破,没有什么发现,主要点还是在数据库. 登录,没有密码. 进入数据库,查找敏感信息. 查看到ssh的用户,进 ...

  2. PostgreSQL数组类型应用

    在使用 awk 脚本:数组是一大利器:在很多场景是用数组能处理. 在 python 中,数据类型list:相当于array类型. 在 Oracle 中,对 array 不够友好,感觉像是鸡肋.但是在 ...

  3. Python-进程-进程池-原理

    进程 资源集合,调度和分配资源,说到进程就不得不提到线程,线程和进程是密不可分,进程申请了资源,但真正使用资源的是线程,其实本质上类似面向对象的思想,面向对象把数据和数据的操作封装在一个类中,进程把资 ...

  4. Python-通过实例方法调用-统一接口的实现-getter methodcaller

    某项目中,我们的代码使用的2个不同库中的图形类: Circle,Triangle 这两个类中都有一个获取面积的方法接口,但是接口的名字不一样 统一这些接口,不关心具体的接口,只要我调用统一的接口,对应 ...

  5. 详解SVM模型——核函数是怎么回事

    大家好,欢迎大家阅读周二机器学习专题,今天的这篇文章依然会讲SVM模型. 也许大家可能已经看腻了SVM模型了,觉得我是不是写不出新花样来,翻来覆去地炒冷饭.实际上也的确没什么新花样了,不出意外的话这是 ...

  6. Python面向对象基础变量

    In [1]: class A: ...: NAME = 'A' # 类的直接下级作用域 叫做类变量 ...: def init(self, name): ...: self.name = name ...

  7. USB虚拟串口 使用基于stm32的RT-Thread

    参考我的RT Thread论坛文章 https://www.rt-thread.org/qa/thread-422644-1-1.html

  8. 极简 Node.js 入门 - 5.1 创建 HTTP 服务器

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  9. android init.rc语法

    转自:http://www.cnblogs.com/nokiaguy/p/3164799.html init.rc由如下4部分组成. 动作(Actions) 命令(Commands) 3. 服务(Se ...

  10. 如何解决Win7,win8无法使用DOS的Debug:

    如何解决Win7,win8无法使用DOS的Debug: 安装dosbox 将含有程序link,masm,edit,debug的文件夹masm放到d盘根目录 打开dosbox,输入mount c d:\ ...