How to add files to the "public folder" in vue 2?

user_12002015 0
Viewed 50

I have a project made in vue.js 2. However there is no public folder; instead, there is a folder named static where you can put files that will be put in the folder /dist/static after you build the staff.

Meanwhile, I need to add a _redirects file to the root of /dist after building, for Netlify integration. However, if I put the file in the root of the project, after building it is ignored. I know that I need to manage something in the config where I have this code:

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

I found vue 2 documentation for this rather confuse. The only thing I need is that my new file _redirects gets included in dist folder after building.

Thanks beforehand for the help.

vuejs2 netlify javascript
1 Answers

I found the way to do it.

My project uses Webpack with the plugin copy-wepback-plugin. In the documentation of the plugin there is information how to copy files from any path to any path into dist folder after building.

In my case, I added some code in webpack.prod.config.js as shown:

// copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      },
      { from: path.resolve(__dirname, '../public'), 
        to: config.build.assetsRoot, 
        ignore: ['.*'] }
    ])

So anything that I put in public folder goes copied to root when building.

user_120020150
Related