如何將文件添加到 vue 2 中的“公共文件夾”？

Question

我有一個在 vue.js 2 中制作的項目。但是沒有公用文件夾； 相反，有一個名為static的文件夾，您可以在其中放置文件，這些文件將在您構建員工后放入文件夾 /dist/static 中。

同時，我需要在_redirects文件添加到 /dist 的根目錄，以用於 Netlify 集成。 但是，如果我將文件放在項目的根目錄中，則在構建后它會被忽略。 我知道我需要在我有此代碼的配置中管理一些東西：

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
  }

我發現 vue 2 文檔對此相當困惑。 我唯一需要的是我的新文件_redirects在構建后包含在 dist 文件夾中。

預先感謝您的幫助。

Answer 1

我找到了方法。

我的項目使用 Webpack 和插件copy-wepback-plugin 。 在插件的文檔中有信息如何在構建后將文件從任何路徑復制到任何路徑到dist文件夾中。

就我而言，我在webpack.prod.config.js中添加了一些代碼，如下所示：

// 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: ['.*'] }
    ])

所以我放在公共文件夾中的任何東西都會在構建時復制到根目錄。