投稿者 yu  (社会人) 投稿日時 2021/9/30 14:45:26
教えて頂いたURLのVue-Cliは実行してみましたがうまくいきませんでした。

ただ、今回はASP.NET Core MVCのVueのjavascript部のVueに置き換えているだけなので、

Vue-Cliでアプリケーション雛形をつくるのは大掛かりすぎるかもしれません。


いまわかっていることは webpackのバンドルファイルでのみ、importがつかえるっぽいです。

Bootstrapのcssは遅延こそするものの、実行されているようです。


その他、importがうまくいってなかったり、エラーしている個所はあるので、うまくいっているわけではありませんが。

- webpack.config.js ----------------------------------------
const path = require("path");
const webpack = require("webpack");

module.exports = {
    entry: {
        main: "./src/js/app.js"
    },
    output: {
        path: path.resolve(__dirname, "..", "wwwroot", "dist"),
        filename: "app.bundle.js"
    },
    devtool: "source-map",
    mode: "development",
    resolve: {
        extensions: [".js", ".vue"],
        alias: {
            "vue$": "vue/dist/vue.global.js",
            "ag-grid-enterprise$": "ag-grid-enterprise/dist/ag-grid-enterprise.js",
            "axios$": "axios/dist/axios.js",
            "bootstrap$": "bootstrap/dist/js/bootstrap.js",
            "chart.js$": "chart.js/dist/chart.js",
            "file-saver$": "file-saver/dist/FileSaver.js",
            "jquery$": "jquery/dist/jquery.js",
            "jquery-validation$": "jquery-validation/dist/jquery.validate.js",
            "jquery-validation-unobtrusive$": "jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js",
            "luxon$": "luxon/src/luxon.js"
        },
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ "style-loader", "css-loader" ]
            },
            {
                test: /\.js?$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            },
        ],
    }
}

----------------------------------------

- app.bundle.js -------------------------------------------------
import "bootstrap"
import "bootstrap/dist/css/bootstrap.min.css"

import "jquery"
import "jquery-validation"
import "jquery-validation-unobtrusive"

import "vue"
import "ag-grid-enterprise";
import "axios"
import "chart.js"
import "file-saver"
import "luxon"

// Custom CSS imports
import "../css/site.css"


console.log("The app.js bundle has been loaded!");

--------------------------------------------------



app.bundle.jsをscript type="module"で読み込み

- _Layout.cshtml -------------------------------------------------
<script type="module" src="~/dist/app.bundle.js"></script>

--------------------------------------------------