vue项目打包部署_nginx代理访问方法详解

我又来了，今天部署了下vue项目，使用nginx做了代理，这样可以解决跨域的问题，这里做一个简单讲解。

1、先看vue项目打包（我这里使用的是vscode开发工具）

这里是我的项目结构：

打包之前需要修改如下配置文件：

配置文件一：build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题)

配置文件二：config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题)

上面两步修改完成之后就可以进行打包了

在控制台终端输入npm run build

坐等打包

打包完成之后项目中会生成一个dist文件夹，直接访问里面的index.html就ok了

我这里有点特殊的地方，需要修改下index.html文件，是因为自己加的一个moment.js

ok，到这里打包的事情完成了，下面就放到服务器上去了

我这里使用的windows版本的nginx做演示，linux的不做讲解了，还有nginx的下载安装也不做讲解，直接看配置：

配置完成后，去启动你的nginx，然后访问就ok了！

以上这篇vue项目打包部署_nginx代理访问方法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于nginx的静态网页部署的实现

    背景: 一序列的html网页需要部署 基于nginx的部署: 本文采用的基于openresty的nginx 配置. 简单地配置 Nginx 的配置文件,以便在启动 Nginx 时去启用这些配置即可实现对于编写好的html网页的点击跳转访问.而本文的重点也是于此. 配置方式1: Nginx 的配置系统由一个主配置文件和其他一些辅助的配置文件构成.这些配置文件均是纯文本文件,一般地,我们只需要配置主配置文件就行了./usr/local/openresty/nginx/conf 下的配置文件修改如下:

  • 详解基于Vue，Nginx的前后端不分离部署教程

    详解基于Vue，Nginx的前后端不分离部署教程

    有小伙伴私信问我vue项目是如何进行前后端不分离打包发布的,那我岂能坐视不管,如此宠粉的我肯定是要给发一篇教程的,话不多说,开始操作 前端假如我们要发布我们的Vue项目,假设我们前端用的是history路由(要发就发个全套的),并且在后端带有一个二级目录,以便于可以在服务器上部署N个项目,在这里后台服务器的话,我用Nginx服务器来给大家模拟,接下来就面对疾风吧: 一.在这里我前端vue项目使用vue cli脚手架进行搭建的,后台使用Nginx,首先是前端配置: 1.前端配置,在这里假如后端访问

  • nginx部署.net core站点的方法

    步骤 aspnetcore程序端口号5001,实际外部端口号8001,相当于把8001收到的请求转发给5001. 把发布出来的文件全部丢掉 /var/www/JuXiangTou 里面去.可以用scp命令或者winscp客户端 centos 7.x aspnet core 的运行环境,不需要装sdk,一般sdk里面是包含runtime的 yum install libunwind libicu yum install aspnetcore-runtime-2.1 nginx,一个反向代理服务,把

  • uwsgi+nginx部署Django项目操作示例

    uwsgi+nginx部署Django项目操作示例

    本文实例讲述了uwsgi+nginx部署Django项目操作.分享给大家供大家参考,具体如下: uWSGI概述 uWSGI 是一个全功能的 HTTP 服务器,可以把 HTTP 协议转化成语言支持的网络协议. 安装uwsgi 使用pip安装即可 pip install uwsgi 安装完成后可测试 #vim test.py def application(env, start_response): start_response('200 OK', [('Content-Type','text/ht

  • docker nginx 部署多个项目的示例方法

    前提条件 1.本地电脑和服务器已安装 docker,下载方法自行谷歌吧 2.在 docker hub 上已有账号, 注册传送门: https://hub.docker.com/ 3.需要对 docker 已有所熟悉 ,并了解Dockerfile里的一些指令 使用Dockerfile 制作镜像 假如本机有一个叫web的项目 在web根目录下新建Dockerfile,写入以下内容 FROM nginx:1.13.6-alpine LABEL maintainer="lilywang <lily

  • Docker容器化部署尝试——多容器通信(node+mongoDB+nginx)

    原因是这样的 想要部署一个mocker平台,就在朋友的推荐下选择了 api-mocker 这个现成的项目 该项目分为服务端node.客户端vue.以及数据库mongoDB 在尝试直接部署的时候发现需要装一大堆的环境,node.mongo.nginx啊,特别的麻烦,之前简单的使用过docker,就在想能不能用docker免环境直接部署呢?于是就有了这次的尝试 多容器通信 该项目分为3个部分,于是就要建立3个容器(node.mongo.nginx) 那容器之间怎么实现通信呢? # 通过link指令建

  • 使用nginx模拟进行蓝绿部署的方式

    使用nginx模拟进行蓝绿部署的方式

    这篇文章介绍一下蓝绿部署以及使用nginx如何最简单地模拟一下蓝绿部署的方式 蓝绿部署 蓝绿部署的重点在于如下特点 1. 蓝色版本和绿色版本同时存在 2. 实际运行的环境为蓝或则绿,只能为其中之一,通过开关控制 优点和缺点分析:优点在于它的速度和回滚.而缺点也显而易见.可以快速回滚是因为有两套环境同时存在的缘故,所以复杂度和需要的资源会增多,因为其有两套环境. 另外虽然速度有所提高,但是在实现的过程中,开关的控制,无论多快的切换速度,如果不结合其他的技术,还是无法做到完全无缝切换. 模拟蓝绿部署

  • Nginx配置SSL证书部署HTTPS网站的方法（颁发证书）

    Nginx配置SSL证书部署HTTPS网站的方法（颁发证书）

    自行颁发不受浏览器信任的SSL证书 手动颁发 xshell登录服务器,使用openssl生成RSA密钥及证书 # 生成一个RSA密钥 $ openssl genrsa -des3 -out tfjybj.key 1024 # 拷贝一个不需要输入密码的密钥文件 $ openssl rsa -in dmsdbj.key -out tfjybj_nopass.key # 生成一个证书请求 $ openssl req -new -key tfjybj.key -out tfjybj.csr 这里会提示输

  • 详解vue通过NGINX部署在子目录或者二级目录实践

    1.修改 router/index.js 添加一行 base: 'admin', 2.然后修改 config/index.js 增加一行 const assetsPublicPath = '/admin/' 然后修改 下面两处assetsPublicPath 的值为定义的变量 3.部署时,通过NGINX的反向代理 首先,给需要部署的项目定义一个 NGINX 的 server server { listen 8001; location / { # vue h5 history mode 时配置

  • 解决vue项目nginx部署到非根目录下刷新空白的问题

    1.修改config/index.js 2.修改路由route/index 3.后台配置nginx 以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

随机推荐