vue中，使用以下方式引入json文件，打包后，删除修改alldata.json文件，页面数据不变，改如何处理

Question

vue中，使用以下方式引入json文件，打包后，删除修改alldata.json文件，页面数据不变，改如何处理

import roualldata from '../../../public/alldata.json'

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

Vue 中使用 import 语句引入 JSON 文件时，会将其作为 ES 模块处理。如果你想要在打包后删除 alldata.json 文件，而页面数据不变，可以使用以下方法：

1. 使用 require 语句代替 import 语句：

const roualldata = require('../../../public/alldata.json');

这样，alldata.json 文件将被作为 CommonJS 模块处理，而不是 ES 模块。

1. 使用 json-loader 插件：

// vue.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  }
};

这样，alldata.json 文件将被作为 JSON 文件处理，而不是 ES 模块。

1. 使用 webpack 的 output 选项，设置 alldata.json 文件的输出路径为空：

// vue.config.js
module.exports = {
  // ...
  output: {
    filename: 'alldata.json',
    path: '',
    publicPath: '/'
  }
};

这样，alldata.json 文件将被输出到根目录，而不是打包后的目录。

说明

使用 import 语句引入 JSON 文件时，Vue 会将其作为 ES 模块处理，这意味着在打包后，alldata.json 文件将被包含在打包后的文件中。如果你想要删除 alldata.json 文件，而页面数据不变，可以使用上述方法之一。