Ionic + Vue作为前端可以与Umbraco作为后端结合吗？ Webpack的挫败感

如何解决Ionic + Vue作为前端可以与Umbraco作为后端结合吗？ Webpack的挫败感

我在Stackoverflow上的第一个问题是：）我正在尝试使用Ionic＆Vue制作一个应用程序，并且作为CMS，我正在使用Umbraco。我想将两者连接起来，我现在通过配置Webpack进行尝试，以便Webpack可以将Ionic＆Vue创建的main.ts文件并对其进行处理，然后将其作为源文件放在主Umbraco文件夹中参考Umbraco内容。

不幸的是，我的运气并不好。我试过配置webpack.config.js文件并安装一堆库，例如'vue-loader'，'ts-loader'，'vue-template-compiler'，'vue-style-loader'等。有些东西正在被编译，只是我不断收到一个错误，指出版本不匹配（vue是@ 3.0.2，vue-template-compiler是@ 2.6.12）。尽管Ionic无法在版本3下与Vue配合使用，所以我感觉自己被卡住了。

所以我的问题是：我缺少什么吗？真的不可能吗，还是有另一种方法将.ts到.js的文件编译到我希望的文件夹中？

编辑（Webpack配置文件）：

var { HotModuleReplacementPlugin } = require('webpack');
var path = require('path');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = (env,argv) => {
    let transpileOnly = argv.transpileOnly === 'true';

    return {
        entry: './src/main.ts',output: {
            path: path.resolve(__dirname,'dist'),filename: 'bundledwebpack.js'
        },module: {
            rules: [
                {
                    test: /\.ts$/,use: [
                        {
                            loader: "ts-loader",}
                    ]
                },{
                    // Now we apply rule for images
                    test: /\.(png|jpe?g|gif|svg)$/,use: [
                        {
                            // Using file-loader for these files
                            loader: "file-loader",// In options we can set different things like format
                            // and directory to save
                            options: {
                                outputPath: 'images'
                            }
                        }
                    ]
                },{
                    // Apply rule for fonts files
                    test: /\.(woff|woff2|ttf|otf|eot)$/,use: [
                        {
                            // Using file-loader too
                            loader: "file-loader",options: {
                                outputPath: 'fonts'
                            }
                        }
                    ]
                },{
                    test: /\.vue$/,loader: 'vue-loader',options: {
                        loaders: {
                            'scss': [
                                'vue-style-loader','css-loader','sass-loader'
                            ],'sass': [
                                'vue-style-loader','sass-loader?indentedSyntax'
                            ]
                        },compiler: '@vue/compiler-sfc'

                    }
                }
            ]
        },plugins: [
            new HotModuleReplacementPlugin(),new VueLoaderPlugin(),].concat(transpileOnly ? [
            new ForkTsCheckerWebpackPlugin({
                reportFiles: ['src/**/*.{ts,tsx,vue}','!src/**/*.js.vue'],tslint: true,vue: true
            })
        ] : []),mode: 'development'
    }


}

解决方法

这听起来比Umbraco的问题更像是Vue问题。您应该能够做到。快速浏览Google之后，这里有一个有效的项目：

https://github.com/ionic-team/ionic-vue-conference-app

您是否尝试过明确安装具有有效版本号的软件包，例如

npm install @ionic/vue@0.0.4