在vue项目中用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。1.产生原因其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被清空。就相当于你声明的全局变量存储在堆和栈内存当中，页面刷新之后就会全部销毁，需要你进行重新赋值。更改 Vuex 的 store 中的状态的唯一方法是提交 m
user nginx;
原创
2021-06-02 19:29:40
587阅读
你当前的 Vue2 项目部署路径是 https://bigdata.xx.com/cctvnp1bd/，你希望将它改为通过根路径访问，即 https://bigdata.xx.com/，可以通过 修改 Nginx 配置和 Vue 项目的 publicPath（或 base） 来实现。一、Nginx 配置修改你需要让 Nginx 把访问根路径 / 的请求，转发到 Vue 项目构建后的目录（如 dis
server { # 端口号 listen 3309; # IP server_name 192.168.1.3; location / { # 执行目录 root /var/www/vue-app-base/dist/; index index.html; # index index.html i ...
转载
2021-08-13 15:03:00
310阅读
2评论
# Nginx配置Vue项目
## 简介
在部署Vue项目时，为了能够让前端应用在生产环境中正常访问，我们通常会使用Nginx作为反向代理服务器进行配置。本文将详细介绍如何通过Nginx配置Vue项目，让您的Vue应用在生产环境中运行顺利。
## 步骤概览
下表展示了配置Vue项目所需的步骤。
| 步骤 | 操作 |
| ---- | ---- |
| 1. 安装Nginx | 检查并安装N
原创
2024-05-17 12:00:51
988阅读
Ubuntu下使用nginx发布vue项目1. Ubuntu18.04搭建nginx服务器1.1 ubuntu安装nginxsudo apt update
sudo apt install nginx1.2 配置防火墙ps: 防火墙配置部分可根据情况选择，一般不需要配置防火墙sudo ufw app list获得应用程序配置文件的列表
可用应用程序：
CUPS
Nginx Full
Nginx H
转载
2024-06-04 11:07:51
208阅读
一.项目部署1.router(history)模式vue项目部署到nginx（1）部署在根目录1）修改router模式为history（默认为hash）const router = new VueRouter({
routes,
mode: 'history'
});对路由模式不清楚的小伙伴，可以看这篇vue-router路由模式详解2）修改config/index.js，build下静态
转载
2024-04-29 09:47:54
1497阅读
VBox持续进行中，哀家苦啊，有没有谁给个star。Github地址：https://github.com/xiangwenhu/vbox, 欢迎大家点赞 vuex是vue用于数据存储的，和redux充当同样的角色。最近在VBox开发的时候遇到的问题，页面刷新或者关闭浏览器再次打开的时候数据归零。这是头疼的问题。网上搜，大家的方案都是把数据转移到 localStorage或者其他持久化存
(目录) 前言 记录下Nginx部署Vue项目刷新404的解决方案，遇到了两次，route用的是history路由模式，动态路由： { path: '/article/:blogId', name: 'blog', component: blog } 然后部署nginx， location / {
原创
2022-05-04 20:51:33
1677阅读
# Docker Vue项目Nginx配置
## 简介
本文将教会你如何使用Docker来配置Vue项目并通过Nginx进行部署。我们将按照以下步骤来完成整个流程：
```mermaid
journey
title Docker Vue项目Nginx配置流程
section 搭建Vue项目
Create Project -> Install Dependencies
原创
2023-11-08 09:44:50
41阅读
在Kubernetes（K8S）环境中配置多个Vue项目需要使用Nginx作为反向代理服务器，以便能够将不同的域名或路径映射到相应的Vue项目上。这样可以实现多个Vue项目在同一台服务器上并行运行的需求。
下面将按照流程和具体步骤详细说明如何配置多个Vue项目在同一个Nginx服务器上：
**流程步骤表格**
| 步骤 | 操作 |
| ------ | ------ |
| 1 | 在K8
原创
2024-05-24 10:42:59
252阅读
文章目录1、vue项目的配置2、nginx的下载和配置3、服务器node后端服务和nginx代理开启 1、vue项目的配置 对于vue/cli3.x及以上版本的vue项目，其缺少配置文件，需要自己手动添加，在 该文章 中有部分说明，主要应对请求跨域的问题。对此根目录下新建vue.config.js：module.exports={
devServer: {
proxy: {
转载
2024-10-22 13:39:05
63阅读
对于Vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-Router存在的意义。前端路由的核心，就在于——改变试图的同时不会向后端发出请求。hash模式： 有 /#/ 号的URL 为hash模式，hash符号之前的内容会被包含在请求中，hash之后的并不会包含于请求中，例如 www.baidu.com/#/name 请求的时候只会请求www.baidu
1、hash模式时（#），nginx配置方法
location ~ ^/test/cms-h5/{
rewrite ^/test/cms-h5(.*)$ $1break;
root/opt/nginx/web/cms-h5/dist;
}
2、hisotry模式时，nginx配置方法 location ~ ^/test/cms-h5/{
原创
2023-04-25 12:12:49
348阅读
文章目录1、图片资源路径2、vue.config.js文件的publicPath配置问题3、web容器的问题 vue项目有2种模式：hash模式 、history模式 理论上使用2种模式都可以，但实际上，使用 history模式 更适合一些，主要有以下2点原因。 ① url美观问题，hash显然是不美观的。 ② 微信分享、支付等，需要将url作为参数传递，会将字符 # 后的字符串截断，即：会丢失
问题描述： 最近在开发cms的时候使用Vue.js框架，利用vue-route结合webpack编写了一个单页路由项目，自己在服务器端配置nginx。部署完成后，访问没问题，从页面中点击跳转也没问题，但是只要点击刷新或通过浏览器地址栏回车，就会出现404现象！在本地开发中是没有这个问题的，调试的时候一切都是正常的在服务器上 如直接访问地址：http://10.***.**.116:8081/hom
转载
2024-05-07 23:04:33
351阅读
项目开发完成之后我们就需要将项目上线运行供用户访问，这时候我们就需要将项目部署到服务器上。对于Vue这种前端Web项目我们一般都部署在linux系统上，Linux常见的Web应用服务器有Apache、Nginx和Tomcat 。Nginx是一款高性能、低消耗的轻量级反代理服务器很适合中小型项目，这里选择Nginx服务器来部署Vue项目。 打包Vue项目项目发布之前我们需要先将项目进行打
转载
2024-02-20 21:50:20
84阅读
下载nginxdocker pull nginxdocker images# 创建挂载目录
mkdir -p /home/nginx/conf
mkdir -p /home/nginx/log
mkdir -p /home/nginx/html容器中的nginx.conf文件和conf.d文件夹复制到宿主机# 生成容器
docker run --name nginx -p 80:80 -d ngi
转载
2024-06-09 20:14:58
67阅读
本篇介绍打包后的vue项目使用nginx部署到本地以及接口的反向代理和负载均衡； 前提：准备一个打包后的vue项目和安装nginx;1，先安装nginx 下载链接：http://nginx.org/en/download.html 我安装的是：1.16.1版本的，如下：然后解压到一个指定的文件夹就行；双击根目录的nginx图标 ，然后再访问 http://localhost/若出现以下页面表示启动
转载
2024-02-27 12:59:40
173阅读
Vue项目部署–nginx配置网上有一堆实例， 但是history模式大部分测试都无效， 还是亲自动手试试！## 一、 打包项目```npm run build```打包结束，会生成 dist 文件夹. 将打包好的文件，复制到nginx目录。> dist> D:\nginx\nginx-1.16.1 (本人nginx存放路径)## 二、Nginx### 2.1 vue hash 模式1
转载
2024-02-29 11:17:02
3212阅读
