我又来了，今天部署了下vue项目，使用nginx做了代理，这样可以解决跨域的问题，这里做一个简单讲解。1.先看vue项目打包（我这里使用的是vscode开发工具）这里是我的项目结构：打包之前需要修改如下配置文件：配置文件一：build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题)配置文件二：config>>index.js(修改assetsPublicPath:‘./‘ ,修改目的是为了解决js找不到的问题)上面两步修改完成之后就...
特别提示：本人博客部分有参考网络其他博客，但均是本人亲手编写过并验证通过。如发现博客有错误，请及时提出以免误导其他人，谢谢！欢迎转载，但记得标明文章出处：http://www.cnblogs.com/mao2080/1、问题描述给前端同事部署了web项目之后，访问发现除了index.html可以访问，其他的路径使用了“伪静态”。比如访问：http://localhost:8081/user/login，访问即报404错误，这个实际上是请求HTML相关资源而非后台接口，后面网上查了...
使用nginx部署vue项目，访问整体样式加载出错；查看chrome浏览器的console，类似下图 后在网络上查找原因，发现是nginx配置有问题，可参考nginx默认配置，具体配置如下： 清理缓存再次访问即可。 原文：https://www.cnblogs.com/cjll/p/13794060.html
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。这篇文章主要介绍了在nginx上部署vue项目(history模式),需要的朋友可以参考下vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://lo...
1、修改config/index.js2、修改路由route/index3、后台配置nginx以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
我又来了，今天部署了下vue项目，使用nginx做了代理，这样可以解决跨域的问题，这里做一个简单讲解。 1、先看vue项目打包（我这里使用的是vscode开发工具） 这里是我的项目结构：打包之前需要修改如下配置文件： 配置文件一：build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题)配置文件二：config>>index.js(修改assetsPublicPath:./ ,修改目的是为了解决js找不到的问题)上面两步修改完成之后就...
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址： 使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history的话，那么访问的路径变成 如下： http://localhost:8080/bank/page/count 这样的了； 在路由的配置就是如下：...
用Docker+Nginx部署SpringBoot+VUE项目，以及部署mysql 所部署环境 jdk 8 mysql 5.7 springboot 2.2.6 centos 7/8 nginx 最新 后端端口 8091 前端不用管，vue打包的文件是放大nginx的html文件下部署MySQL 1.拉取mysql镜像 docker pull mysql:5.72.运行mysql docker run -d -p 3306:3306 --name mysql -e MYSQL_ROOT_PASSWORD=123456 mysql:5.7然后就可以远程连接， 密码是123456 主机名服务器ip部署SpringBoot项目 1.将applicaton...
目录 一、docker安装redis1、下载redis镜像2、在本地服务器创建conf和data目录3、进去conf目录，传输修改好了的redis.conf文件4、关闭防火墙5、启动redis镜像6、查看容器 二、docker安装nginx1、下载nginx2、启动nginx3、关闭防火墙4、查看启动的docker容器并测试 三 、nginx部署vue项目,映射本地目录到nginx容器6、启动nginx镜像7、准备vue项目打包好的静态文件8、修改nginx.conf配置文件8、重启nginx容器9、测试一、docker安装re...
目录打包vue项目转移文件修改配置文件重启nginx 打包vue项目 yarn build转移文件 将打包生成的dist文件夹复制到nginx目中的html文件夹中 修改配置文件 conf 目录下的 nginx.conf 文件server {listen 3100;server_name 127.0.0.1;location / {root D:/soft/nginx-1.18.0/html/dist; # 指定vue项目打包的绝对路径index index.html index.htm;}error_page 500 502 503 504 /50x.html;location = /50x.html {root html;...
第一步：vue项目打包前，更改publicPath，不同版本在不同目录下，2.X在build->config下，3.X在vue.config.js下，如下图设置，我的是3.0；打包。 module.exports = {productionSourceMap: false, //减少打包后的.map文件publicPath: '/web/',// 输出文件目录outputDir: 'web', } 第二步：配置nginx，伪静态设置，如下图，默认打开是前端，后台为admin，请注意root和alias的区别，简单的说，root会自动加上location后的路径，alias则...
nginx部署vue打完的zip包步骤 1.如果单vue项目的话，只需要配置root就行，但业务上一般会多项目同时部署，所以需要加一些配置。 2.我也是配合安全测试时部署项目遇到的问题，所以分享出来，希望大家学到一点东西，避坑。废话不多说，上才艺。 3.nginx下载地址，尽量选择Stable version(稳定版) 4.具体的linux安装nginx步骤，可以参考linux安装nginx完整步骤 5.单项目部署的话只需要:server {listen 80;server_name localhost;...l...
前言有时候我们打包好vue项目让后端人员部署项目时可能会有小插曲，为了不麻烦后端人员和避免尴尬，最好的办法就是在本地自己先测一下，而在本地运行打包后的项目会遇到接口跨域的问题。我平时经常用的方法就是配置nginx设置反向代理解决跨域问题。准备过程安装nginx，具体怎么安装部署可以参考 传送门 准备打包后的vue项目配置nginx编辑nginx.conf 配置文件在配置文件中新增一个server#新增一个服务server {listen 8088; # ...
一、安装windows系统的nginx，见如下地址： http://nginx.org/en/download.html 一般下载稳定版的 二、打包项目 npm run build 生成dist文件 三、将dist目录下的文件放在nginx所对应的html目录下 1.记得先删除原本自带的css文件再粘贴 继续html文件内部 四、配置nginx的配置文件 如下： 五、在地址栏访问：http://localhost:8081
nginx配置：server {listen 123;server_name 192.168.88.128;location /calledfront/trafficbg/public/ {proxy_pass http://127.0.0.1:8080/;proxy_pass_header Set-Cookie;proxy_set_header Host $proxy_host;}location /calledfront {root /usr/local/nginx/html/ctyuncss; #路径配置到vue项目的上层目录#index index.html index.htm;try_files $uri $uri/ /calledfront/index.html; #calledfront为vue项目打包后的文件夹...