如何物理修改Config内JS变量？实现Vue通知仅显示一次

Hey there! Let's break down your problem and figure out a solution that works for you. First off, the key point you need to understand: 前端代码 runs in the user's browser, and it has no permission to directly modify static files on your server (like your notifications.js). That's why deleting elements from the array in Vue only works temporarily—you're just modifying a copy of the data in the browser's memory, not the original file on the server.

Since you don't want to use a database, we can go with a lightweight alternative: use a simple backend API paired with a server-side JSON file to manage your notification list. This way, the frontend requests notifications via the API, and delete operations tell the backend to modify the actual file on the server—achieving that "physical overwrite" you need.

具体实现步骤 #

1. 把静态JS文件换成JSON文件 #

First, rename config/notifications.js to config/notifications.json and simplify its content to just the array (no variable declaration needed):

[
  {"message": "First message", "user": "First user to contact"},
  {"message": "Another message", "user": "Another user to contact"}
]

2. 搭建简单的后端接口（Node.js + Express示例） #

If you don't have a backend yet, you can quickly set up a tiny server to handle notification reads and deletes:
First install the dependencies:

npm install express fs-extra

Then create a server.js file:

const express = require('express');
const fs = require('fs-extra');
const app = express();
const PORT = 3001;

// Allow cross-origin requests (if your Vue app runs on a different port)
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// Get the full list of notifications
app.get('/api/notifications', async (req, res) => {
  try {
    const notifications = await fs.readJson('./config/notifications.json');
    res.json(notifications);
  } catch (err) {
    res.status(500).json({ error: 'Failed to load notifications' });
  }
});

// Delete a notification by index
app.delete('/api/notifications/:index', async (req, res) => {
  try {
    const index = parseInt(req.params.index);
    const notifications = await fs.readJson('./config/notifications.json');
    
    if (index >= 0 && index < notifications.length) {
      notifications.splice(index, 1);
      await fs.writeJson('./config/notifications.json', notifications, { spaces: 2 });
      res.json({ success: true });
    } else {
      res.status(400).json({ error: 'Invalid notification index' });
    }
  } catch (err) {
    res.status(500).json({ error: 'Failed to delete notification' });
  }
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

3. 在Vue项目中调用接口 #

Instead of importing the static variable directly, your Vue component will now fetch notifications from the API and send delete requests:

<template>
  <div class="notifications-container">
    <div v-for="(notification, index) in notifications" :key="index" class="notification-item">
      <p>{{ notification.message }} - {{ notification.user }}</p>
      <button @click="deleteNotification(index)" class="delete-btn">Remove</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notifications: []
    };
  },
  async mounted() {
    // Load notifications when the component mounts
    const response = await fetch('http://localhost:3001/api/notifications');
    this.notifications = await response.json();
  },
  methods: {
    async deleteNotification(index) {
      // Send delete request to the backend
      await fetch(`http://localhost:3001/api/notifications/${index}`, {
        method: 'DELETE'
      });
      // Update the local list to reflect the change
      this.notifications.splice(index, 1);
    }
  }
};
</script>

为什么这个方案能解决你的问题？ #

• The backend runs on your server, so it has permission to modify the notifications.json file. When you delete a notification, the change is saved permanently to the server—refreshing the page will load the updated list instead of the original.
• You don't need a full database; the JSON file is simple to manage and still works with your internationalization plugin (you can handle message localization in the frontend as before).

为什么之前的方法没效果？ #

• Modifying the frontend array: You were only changing temporary data in the browser's memory. The original server file remained untouched, so it reloaded on refresh.
• localStorage: This stores data locally on the user's browser, so it doesn't carry over to other browsers or devices. It also doesn't modify the server-side source of truth for notifications.

内容的提问来源于stack exchange，提问作者cprieels