vue.js - 如何在 Vue.js 中排除文件(例如配置文件)?

标签 vue.js webpack

  • https://cli.vuejs.org/config/#configurewebpack
  • https://cli.vuejs.org/config/#chainwebpack

  • 我试过了:
    chainWebpack: config => {
        config.merge({
            module: {
                rules: [{
                    test: /\.jsx?$/,
                    exclude: {
                        exclude: [path.resolve(__dirname, "public/my-config.js")]
                    }
                }]
            }
        })
    }
    

    或者
    config.module.rule('js')
      .exclude({
        exclude: path.resolve(__dirname, "public/my-config.js")
      })
    

    但它不起作用。

    我想导入 public/my-config.js pages/index.html 中带有脚本标记或只是 import { config1, config2 } from '../public/my-config' .

    我可以使用 externals虽然在 webpack 中不包含模块,但 Vue.js 不太直观。

    我必须有 my-config.js可在 dist/ 获得以便可以对其进行编辑。

    最佳答案

    引用:

  • https://github.com/neutrinojs/webpack-chain#config-plugins-modify-arguments
  • https://github.com/webpack-contrib/copy-webpack-plugin#ignore

  • 我在 vue.config.js 中写的内容:
    const path = require("path");
    
    module.exports = {
        baseUrl: ".",
        chainWebpack: config => {
            config.plugin('copy').tap((args) => [[
                  {
                    from: '/path/to/my_project/public',
                    to: '/path/to/my_project/dist',
                    toType: 'dir',
                    ignore: [
                      'index.html',
                      '.DS_Store',
                      'config.data.js'
                    ]
                  }
              ]]
            );
        }
    }
    

    我用了$ vue inspect > output.js然后检查了output.js config.plugin('copy') 使用了哪些参数的文件恰好是 new CopyWebpackPlugin 的一个实例.

    关于vue.js - 如何在 Vue.js 中排除文件(例如配置文件)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53035036/

    相关文章:

    vue.js - Vue Apollo : How can I query GraphQL using an object as Input argument?

    javascript - 用于将 vue 组件发布到 npm 包中的 Webpack 配置

    vue.js - 在 nuxt.js 组件文件中拆分模板、脚本和样式(HTML、JS 和 CSS)

    javascript - 如何将带有静态 Assets 的 React 组件发布到 npm?

    javascript - 在Electron渲染器进程中持久化nedb到磁盘(Webpack/Electron/nedb配置问题)

    vue.js - 分离 Vuex 模块的最佳实践是什么?

    javascript - 如何使用插槽在 Vuetify 数据表中设置分组行的样式?

    javascript - 尝试使用 ts-loader 时 Webpack 抛出错误

    javascript - webpack require (jquery) 不起作用

    javascript - Visual Studio -> Shared TypeScript Library -> TS6059 文件 '' 不在 'rootDir' '' 下。 'rootDir' 应该包含所有源文件