这可能看起来有点复杂，答案可能是“不要那样做，这样做”，所以我将从我正在做的事情的背景开始。基本上我有一个遗留的 AngularJS 应用程序，我们希望将其从 Vue 迁移到 Vue。我们无法选择端到端重写应用程序，并且需要一点一点地进行，同时仍然提供功能齐全的应用程序。

因此，总体目标是让两个框架同时运行，我希望我可以对路由做一些事情，或者可能将我的单页面应用程序分成两个单独的页面以用于不同的框架。我已经将 angularjs 从使用 gulp 构建管道转换为使用 webpack，因为我认为这是让 Vue 运行的逻辑第一步，但现在我遇到了障碍。

我用于构建角度应用程序的 webpack.config.js 如下所示：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    target: 'web',
    // mode: "development",
    // devtool: "source-map",
    module: {
        rules: [

            {
                test: /\.html$/,
                loader: "html-loader",
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                  "style-loader",
                  "css-loader",
                  "sass-loader",
                ],
              },
              {
                test: require.resolve("jquery"),
                loader: "expose-loader",
                options: {
                  exposes: ["$", "jQuery"],
                },
              }
        ],
    },
    entry: {
        vendor: "./source/vendor.js",
        main: "./source/index.js",
    },
    optimization: {
        minimize: false
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'distribution'),
        clean:true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'source/index.html',
        })
    ]
};

现在工作正常，我得到了一些东西，添加了像以前一样工作的结尾。

然后我添加了一个 /source/vueJs 目录，并复制并粘贴了 vue create hello-world 生成的内容 hello world 项目。我的假设是，如果我可以修改我的 webpack.config.js 来构建它，然后我可以进一步迭代它以达到将两个工作应用程序合并在一起的程度，但我已经在努力获得 hello-world vue 项目可以生产任何东西。

到目前为止，我基本上注释掉了所有相关的 angularJS 部分，并添加了我认为正确的内容来构建 vue 应用程序，所以现在我有了：

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

module.exports = {
    target: 'web',
    mode: "development",
    devtool: "source-map",
    module: {
        rules: [

            // {
            //     test: /\.html$/,
            //     loader: "html-loader",
            // },
            // {
            //     test: /\.s[ac]ss$/i,
            //     use: [
            //       "style-loader",
            //       "css-loader",
            //       "sass-loader",
            //     ],
            //   },
            //   {
            //     test: require.resolve("jquery"),
            //     loader: "expose-loader",
            //     options: {
            //       exposes: ["$", "jQuery"],
            //     },
            //   },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                  },
                ],
              },
              {
                test: /\.vue$/,
                loader: 'vue-loader'
              },
              // this will apply to both plain `.js` files
              // AND `
            
            
            
            
            
            
            
            
            
            
            
            

            

                

                    
                    

                        P粉301523298
                        

                    
                
                

                    

                    

                        

                            回答
                        
                    
                
            
            

                

                    
全部回复(1)
                    我来回复
                
                


                                

                    
                    

                        

                            

                                P粉5118967162024-03-30 00:07:31
                                1楼
                            
                            
我只见树木不见森林。问题不在于 webpack.config.js 没有成功生成工作的 Angular 和 Vue 组合应用程序，问题在于我没有提供实际使用的模板 其中任何一个，因此它只会生成一个空白的 index.html ，其中包含提供的脚本，但正文中没有内容。
改变
new HtmlWebpackPlugin({
        //template: 'source/index.html',
    }),
在我的问题中，有一个同时使用 AnularJS 组件和 Vue 组件的模板工作得很好。
                            

                                 
                                赞 +0
                                

                                    添加回复
                                
                            
                                                            

                                    

                                        

                                            

                                                
                                                P粉301523298
                                            
                                            

                                        
                                        
                                        回复