介绍 vue在国内的前端地位可谓是如日中天，由于目前主流的前后端分离式开发，让许多前端小伙伴不太了解服务器操作特别是Linux，而许多后台开发人员虽然精通服务器，却不懂前端框架如何发布。本篇将详细介绍vue构建静态文件发布至Linux并配置Nginx服务代理https，在发布前我们先需要准备以下环境：Linux服务器：CentOS、Ubuntu 域名：云服务商处购买域名 SSL证书：云服务商购买或Open SSL配置服务器 下面以阿里云服务为例，介绍Linu...
文章目录 前言安装NginxVue项目部署前言安装Nginx 1、下载Nginx http://nginx.org/en/download.html 2、上传 可以使用XShell+XFtp工具上传到/usr/local目录 或直接下载 wget -c https://nginx.org/download/nginx-1.12.0.tar.gz3、解压 tar -zxvf nginx-1.12.2.tar.gz4、安装相关的依赖工具 yum install -y gcc-c++ yum install -y pcre pcre-devel yum install -y zlib zlib-devel yum install -y openssl openssl-devel5、配置 ...
0 环境服务器：阿里云服务器操作系统：centosssh ：xshell后端语言：djangopython默认版本：3.6.8 1 导图 环境基础+部署流程 2 xhsell安装和配置 xshell安装包+配色方案下载 xshell安装 使用遇到的问题 + 配色方案 3 激活python环境 参考文档 1 环境安装 pip/pip3 install virtualenv 2 创建目录 ? 若想virtualenv使用系统全局模块,virtualenv --system-site-packages myprojects ? virtualenv myprojects 3 环境激活 source mypro...
后端提供的请求接口完整地址示例：https://www.baidu.com/company/getlist 前端配置： 一：axios请求url: /api/company/getlist nginx配置代理转发跨域： 方法1： location ^~ /api/ { proxy_pass https://www.baidu.com/; # 转发地址 } 方法2： location ^~ /api/ { rewrite ^/api/(.*)$ /$1 break; # 重写路径将 api 替换为空 proxy_pass https://www.baidu.com; } 二：axios请求url: /company/getlist loc...
http {log_format main $remote_addr - $remote_user [$time_local] "$request" $status $body_bytes_sent "$http_referer" "$http_user_agent" "$http_x_forwarded_for";access_log /var/log/nginx/access.log main;sendfile on;tcp_nopush on;tcp_nodelay on;keepalive_timeout 65;types_hash_max_size 2048;# 开启gzipgzip on;gzip_static on;gzip_disable "msie6";gzip_vary on;gzip_proxie...
安装nginx apt-get purge nginx nginx-common 进入nginx配置文件，配置nginx cd etc/nginx/sites-enabled sudo vim default 进入default，点击i打开编辑模式，主要配置端口，文件位置和接口地址，如下图： *所配端口必须保证是放行状态 netstat -aptn 查看所有放行的端口号 sudo ufw enable allow 8888 放行指定的端口号 *配置项目路径 root后面为vue项目在该服务器的路径，我的路径是/home/ubuntu/youjiTest/dist *配置接口地...
vue cli 4.x 构建的前端项目在本地调试无问题，但部署到服务器后，无法正常访问。 网上很多说 “问题出在vue项目中，在router文件夹的index.js文件中，将mode修改为hash模式即可，如果使用的是history，那么需要后端进行配置。” 这里说下我的解决过程一、部署到服务器出错 “We’re sorry but project-name doesn’t work properly without JavaScript enabled. Please enable it to continue.” 二、错因分析 可以发现，项目打包...
vue nginx配置 记录线上配置坑，采用官方配置说明仍无效 记录线上配置坑，采用官方配置说明仍无效 在nginx配置为根路径’/’,设置官方推荐配置，仍不生效 官方推荐配置 location / {root /xxx路径/er-ui;try_files $uri $uri/ /index.html; }采用以下配置解决问题location / {root /xxx路径/er-ui;if (!-e $request_filename){rewrite ^/ /index.html;}index index.html index.htm;}
起因 在vue文件打包后，项目脱离了vue配置的反向代理配置，还是会报跨域的错误，或者直接打不开本地文件， 但是此刻我们想打开打包后的文件，测试一下文件有没有错误，因为经常会存在开发阶段没有问题，打包后项目就各种问题，此时我们可以利用nginx处理跨域，其实vue配置也是利用的这个 nginx处理vue打包文件后的跨域问题 安装 先在官网下载nginx 注意版本 运行的环境 我这里用的是windows 然后解压下来就好了 vue修改配置 在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对象)资源发布路径# chan...
环境搭建 1.安装Linux，这里我用的阿里云服务器，CentOS7版本 2.进入Linux，安装Docker，执行以下命令 sudo yum update #更新一下yum包 sudo yum install -y yum-utils #安装 yum-utils，它提供了 yum-config-manager，可用来管理yum源 yum -y install docker-ce #安装Docker yum list installed | grep docker #查看是否成功安装Docker如果提示No package docker-ce available则执行 sudo yum-config-manager --add-repo https:...
Nginx是目前用的比较多的一个前端服务器 其优点是配置简单修改一下server就能用 并发性能比较好，具体怎么好就看这个吧 开撸 1、找到nginx （liunx系统，已安装） whereis nginx 2、找到位置并进入 nginx: /usr/local/nginx cd /usr/local/nginx 3、修改conf/nginx.conf（提示权限不够的前面加 sudo） vi conf/nginx.conf 4、直接在server里面修改 ` server { # listen后面跟上监听的端口号 listen 80; server_name localho...
文中本机测试地址 前端：http://localhost:8080/ 后端：http://www.api.test 1. 前端代理配置：/config/index.js 1 proxyTable: {2 // 以 /api 开头的请求 URL3 /api:{4 // 代理到的地址5 target:http://www.api.test,6 // 请求的header将会设置为匹配目标服务器的规则7 changeOrigin:true,8 // 重写路径9 pathRewrite:{ 10 ^/api:/test 11 } 12 } 13 } 2. 前端代码，如果上面代理以 /...
[ 测试环境服务器目录 ](温馨提示：配置1，配置2均在 vue.config.js 文件中修改) 1. 配置 publicPath 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上， 例如：https://www.histomed.com。 如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径， 例如：如果你的应用被部署在 https://www.histomed.com/admin/，则设置 baseUrl 为 /admin/。 (此处做了环境的区分，其实这里可以直接写为publicPa...
(转载请删除括号里的内容) nginx是一个高性能的HTTP和反向代理服务器。因此常用来做静态资源服务器和后端的反向代理服务器。本文主要记录使用nginx去部署使用vue搭建的前端项目，项目基于vue官方的脚手架vue-cli构建。 打包vue项目npm run build通过上面命令后打包好的静态资源将输出到dist目录中。如图所示 安装nginx 到nginx官方下载系统相关的nginx版本安装 windows环境 下载相应的windows版本解压，解压后如图所示 启动命令...