在vue中,用axios将json数据渲染到echarts上,webpack打包后,json文件的路径错误,数据渲染失败

我将json文件放在了static中,文件夹中,用webpack打包前是正常的,在pc端能正常显示。在经过webpack打包之后,在hbuilder中查看,发现json文件的路径报错,echarts渲染失败。
代码如下:

vue

<template>
  <div id="tline">
    <div id="main"></div>
  </div>
</template>

<style scoped>
  #main {
    height: 400px;
    width: auto;
  }
</style>


<script>
import echarts from 'echarts'
export default {
  methods: {
    drawLine() {
      let myChart = echarts.init(document.getElementById('main'))
      let _this = this
      myChart.setOption({
        title: {
          text: '这是tLine页折线图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: [],
          top: 32
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: 90,
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: []
        }],
        yAxis: [{
          type: 'value'
        }],
        series: []
      })
      _this.axios.get("../../static/data.json")
        .then((response) => {
          myChart.setOption({
            legend: {
              data: response.data.legend
            },
            xAxis: [{
              data: response.data.date
            }],
            series: response.data.data
          });
        })
        .catch(() => {
          console.log("error")
        })
    }
  },
  mounted() {
    this.drawLine()
  }
}
</script>

webpack.base.config.js只更改了publicPath

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: './'
  },

图片描述

也试过更改了config/index.js里面的assetsSubDirectory和assetsPublicPath,同样不起效果。

请问要更改什么设置,才能让json文件的路径正确?

阅读 6.2k
2 个回答

请问楼主找到解决办法了吗,求解

是访问路径有问题,static目录下的文件,默认是直接打包到根目录下的static目录
改成这样请求就好了

    _this.axios.get("/static/data.json")
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题