从输入文件导入时，未定义vue 3 createApp

发布于 2025-02-01 11:03:41 字数 1847 浏览 0 评论 0原文

我正在尝试使用WebPack设置VUE应用程序。

这是我的webpack.config.js file：

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        "Shared/global": './ClientApp/src/js/Shared/global.js',
    },
    output: {
        filename: 'js/[name].entry.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: ""
    },
    devtool: 'source-map',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader'],
            },
            {
                test: /\.(eot|woff(2)?|ttf|otf|svg)$/i,
                type: 'asset'
            },
            {
                test: /\.js$/,
                use: {
                  loader: "babel-loader",
                },
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css"
        })
    ]
};

这是输入文件：

import {createApp} from 'vue';
import { createStore } from 'vuex'
const _ = require('lodash')

在我的layout.html中，我调用global.entry.js这样：


<body>
    <div id="layoutApp">
        <h1>HELLO</h1>
    </div>
</body>

<script type="module" src="/dist/js/Shared/global.entry.js" defer></script>
<script src="/ClientApp/src/js/Shared/layout.js" defer></script>

layout.js中使用vue.

const layoutApp = createApp({
    mounted(){
        console.log("layout is mounted VUE")
    },
});

layoutApp.mount("#layoutApp")

var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
 
console.log(other);

然后，我尝试在未定义。但是，如果我只运行lodash代码，lodash效果很好。我无法弄清楚我做错了什么。任何帮助都会非常有帮助

原文

I'm trying to setup vue app using webpack.

This is my webpack.config.js file:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        "Shared/global": './ClientApp/src/js/Shared/global.js',
    },
    output: {
        filename: 'js/[name].entry.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: ""
    },
    devtool: 'source-map',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader'],
            },
            {
                test: /\.(eot|woff(2)?|ttf|otf|svg)$/i,
                type: 'asset'
            },
            {
                test: /\.js$/,
                use: {
                  loader: "babel-loader",
                },
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css"
        })
    ]
};

And this is the entry file:

import {createApp} from 'vue';
import { createStore } from 'vuex'
const _ = require('lodash')

In my layout.html I call global.entry.js as such:


<body>
    <div id="layoutApp">
        <h1>HELLO</h1>
    </div>
</body>

<script type="module" src="/dist/js/Shared/global.entry.js" defer></script>
<script src="/ClientApp/src/js/Shared/layout.js" defer></script>

Then I try to use vue in layout.js:

const layoutApp = createApp({
    mounted(){
        console.log("layout is mounted VUE")
    },
});

layoutApp.mount("#layoutApp")

var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
 
console.log(other);

But in chrome console it said createApp is not defined. But if I run only lodash code, lodash works fine. I cant figure out what I did wrong. Any help would be very helpful

分享到QQ

分享到微博