使用vueCLI構建的應用程式可以完美運行，但是使用webpack構建時似乎可以作業，但不會呼叫組件函式

一直在追逐這個，并設法將其縮小到我的 webpack 配置。由于各種原因，我必須使用 webpack，所以不使用它不是一種選擇。

基本上我有一個“Hello World”Vue 專案。當我通過它為這個應用程式提供服務時，npx vue-cli-service serve它運行良好，我沒有遇到任何問題。作為參考，我有一個如下所示的組件：

<template>
    <header class="app-header">
        {{ items }}
        {{ msg }}

        <ul>
            <li v-for="item in items" :key="item.message">
                {{ item.message }}
            </li>
        </ul>
    </header>
</template>

<script>
export default {
    name: 'TheAppHeader',
    props: {
        msg: String
    },
    data() {
        return {
            items: [{ message: 'Foo' }, { message: 'Bar' }],
        }
    },
    created() {
      // eslint-disable-next-line no-console
      console.log('here');
      this.items.push({ message: 'FooBar' });
    }
}
</script>

以這種方式提供服務時效果很好 - 使用它的模板通過<TheAppHeader msg="test"></TheAppHeader>. 我看到了msg通過，我看到了this.items正確的渲染（以及console.log通過）。

當我通過應用程式構建應用程式時npx webpack build，一半作業。我msg像以前一樣看到了通過，但this.items沒有渲染，console.log也沒有通過。既不data()也不created()被呼叫。我無法弄清楚我的 webpack 配置有什么問題來創建這樣一個晦澀的問題？這很常見嗎？

我vue.config.js看起來像這樣

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map',
  }
})

我的webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
const webpack = require('webpack');
const ESLintPlugin = require('eslint-webpack-plugin');


module.exports  = (env, argv) => { 
    let config = {
        target: 'web',
        mode: 'development',
        module: {
            rules: [
                {
                    test: /\.(png|jpe?g|gif|svg)$/i,
                    type: 'asset/resource',
                    generator: {
                        filename: 'images/[hash][ext][query]'
                    }
                },
                {  
                    test: /\.(woff|woff2|eot|ttf|otf)$/,
                    type: 'asset/resource',
                    generator: {
                        filename: 'fonts/[hash][ext][query]'
                    }
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    options: {
                        babelParserPlugins: [
                          'jsx',
                          'classProperties',
                          'decorators-legacy'
                        ]
                      }
                },
                // this will apply to both plain `.js` files
                // AND `<script>` blocks in `.vue` files
                {
                    test: /\.js$/,
                    loader: 'babel-loader'
                },
                // this will apply to both plain `.css` files
                // AND `<style>` blocks in `.vue` files
                {
                    test: /\.css$/,
                    use: [
                        'vue-style-loader',
                        'css-loader'
                    ]
                },
            ],
        },
        entry: {
            vue:     './src/main.js'
        },
        optimization: {
            minimize: true
        },
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'distribution'),
            clean:true,
            publicPath: '/app/',
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './public/index.html'
            }),
            new VueLoaderPlugin(),
            new webpack.DefinePlugin({
                // Drop Options API from bundle
                __VUE_OPTIONS_API__: false,
                // Enable devtools support
                __VUE_PROD_DEVTOOLS__ : true,
                'process.env': {
                    BASE_URL: '"/"'
                  }
            }),
            new ESLintPlugin(
                {
                
                  extensions: [
                    '.js',
                    '.jsx',
                    '.vue'
                  ],
                  cache: true,
                  failOnWarning: false,
                  failOnError: true,
                  formatter: 'stylish',
                }),
        ],
    }
    return config;
}

uj5u.com熱心網友回復：

<Component>.data()并且<Component>.created()是 Options API 的一部分（根據vuejs.org/api）。通過添加

    new webpack.DefinePlugin({
        // Drop Options API from bundle
        __VUE_OPTIONS_API__: false,
    }),

我專門禁止呼叫這些函式。

根據這個答案，我應該遵循使用該標志集的組合方式：Vue 3 Composition API data() function I need to stop using data()and use the setup()call instead。

標籤：javascriptVue.js网页包

上一篇：將字串正確拆分為陣列陣列

下一篇：帶有自定義形狀的軸上的D3額外標簽