CODEWITHSUNDEEP
javascriptwebpackvue-cli
coure2011
coure2011

Reputation: 42444

configuring webpack config file in vue-cli 3

I have just created a base project using command "vue create my-project" Now I am fetching a csv file using fetch API, the issue is as the url of csv file is wrong its always returning me index.html file instead of error. Here is my code:

const data = await fetch('/url/path/to/my.csv')
const val = data.text()
// here val always have the same content as of index.html

how can I fix it?

Upvotes: 2

Views: 3414

Answers (2)

Lindoélio Lázaro
Lindoélio Lázaro

Reputation: 969

Since the title of this question is about "configuring webpack config file in vue-cli 3", let me tell you can customize your webpack configs just changing the vue.config.js, that it was automaticaly included in your project root directory with vue create my-project, as follows:

// vue.config.js

module.exports = {
  configureWebpack: {
    // It will be merged into the final Webpack config
    plugins: [
      new MyWebpackPluginExample()
    ]
  }
}

Upvotes: 3

Agney
Agney

Reputation: 19204

If you would like to use fetch to get the json file, you will have to setup a server for the file, at least in a production environment.

But on the client side, you can import the csv file into the webpack module. To install csv loader, 

npm install csv-loader --save-dev

Add the loader to the webpack.base.config.js file at build/webpack.base.config.js with:

{
   test: /\.csv$/,
   loader: 'csv-loader'
}

Now load the file into module with:

import file from './path/file.csv';

and access the same with the file variable.

Upvotes: 0

Related Questions