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
八、注意:需要开启你服务器所有的安全组权限
九、查看页面
Centos7 使用nginx部署vue项目的更多相关文章
- CentOS7 安装nginx部署vue项目
简单描述:代码开发完了,需要环境来运行测试.服务器上没有nginx,搞起搞起. 在Centos下,yum源不提供nginx的安装,可以通过切换yum源的方法获取安装.也可以通过直接下载安装包的方法 ...
- nginx部署vue项目
nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...
- Docker镜像+nginx 部署 vue 项目
一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西 ...
- nginx部署vue项目 解决方案
给前端同事部署了web项目之后,访问发现除了index.html可以访问,其他的路径使用了“伪静态”.比如访问:http://localhost:8081/user/login,访问即报404错误,这 ...
- Centos+Nginx部署Vue项目
1.项目打包生成dist文件夹 在项目根目录下打开cmd窗口,输入命令 npm run build //生成dist文件夹 2.将dist文件夹上传到centos7 使用scp命令或者用远程连接工具将 ...
- 关于nginx部署vue项目的两个问题
首先我使用的是后端接口+前端vue的形式,这样就涉及到跨域的问题.我是这样配置的: server { listen 80; server_name www.liangyp.xyz;//访问网址 loc ...
- Nginx部署vue项目的配置
. 官网下载 http://nginx.org/en/download.html 选择stable version nginx/Windows-1.14.1 pgp . 解压 然后配置环境变量,如果环 ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 在nginx上部署vue项目(history模式)--demo实列;
在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...
随机推荐
- dpwwn-01靶机渗透
dpwwn-01 主机发现+端口扫描 发现3306端口,80端口. 访问80端口,进行目录爆破,没有什么发现,主要点还是在数据库. 登录,没有密码. 进入数据库,查找敏感信息. 查看到ssh的用户,进 ...
- PostgreSQL数组类型应用
在使用 awk 脚本:数组是一大利器:在很多场景是用数组能处理. 在 python 中,数据类型list:相当于array类型. 在 Oracle 中,对 array 不够友好,感觉像是鸡肋.但是在 ...
- Python-进程-进程池-原理
进程 资源集合,调度和分配资源,说到进程就不得不提到线程,线程和进程是密不可分,进程申请了资源,但真正使用资源的是线程,其实本质上类似面向对象的思想,面向对象把数据和数据的操作封装在一个类中,进程把资 ...
- Python-通过实例方法调用-统一接口的实现-getter methodcaller
某项目中,我们的代码使用的2个不同库中的图形类: Circle,Triangle 这两个类中都有一个获取面积的方法接口,但是接口的名字不一样 统一这些接口,不关心具体的接口,只要我调用统一的接口,对应 ...
- 详解SVM模型——核函数是怎么回事
大家好,欢迎大家阅读周二机器学习专题,今天的这篇文章依然会讲SVM模型. 也许大家可能已经看腻了SVM模型了,觉得我是不是写不出新花样来,翻来覆去地炒冷饭.实际上也的确没什么新花样了,不出意外的话这是 ...
- Python面向对象基础变量
In [1]: class A: ...: NAME = 'A' # 类的直接下级作用域 叫做类变量 ...: def init(self, name): ...: self.name = name ...
- USB虚拟串口 使用基于stm32的RT-Thread
参考我的RT Thread论坛文章 https://www.rt-thread.org/qa/thread-422644-1-1.html
- 极简 Node.js 入门 - 5.1 创建 HTTP 服务器
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- android init.rc语法
转自:http://www.cnblogs.com/nokiaguy/p/3164799.html init.rc由如下4部分组成. 动作(Actions) 命令(Commands) 3. 服务(Se ...
- 如何解决Win7,win8无法使用DOS的Debug:
如何解决Win7,win8无法使用DOS的Debug: 安装dosbox 将含有程序link,masm,edit,debug的文件夹masm放到d盘根目录 打开dosbox,输入mount c d:\ ...