Vue 未通过 Webpack4 连接

控制台错误：未定义 Vue

如果您通过 CDN 连接 - 一切正常

虽然输出文件包含main.66905f9e91666cf52fc4.js?da38ad338a15dcb4c609代码vue.js

我的行动：

1. 下载 npm i vue 包

2. 在 index.js 中导入 -> 导入 'vue'

3. 在 webpack 配置 -> index.js 入口点 -> 出口点 -> dist/js/main.js

4. main.js 成功包含在页面底部

5. 检查 main.js 并在那里找到缩小的 vue.js

6. 但是 Vue 的代码不起作用

webpack.config.js

// Webpack v4
const path =                    require('path');
const MiniCssExtractPlugin =    require('mini-css-extract-plugin');
const FileManagerPlugin =       require('filemanager-webpack-plugin');
const { CleanWebpackPlugin } =  require('clean-webpack-plugin');
const HtmlWebpackPlugin =       require('html-webpack-plugin');
const WebpackMd5Hash =          require('webpack-md5-hash');

module.exports = {
  entry: { main: './src/js/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[chunkhash].js'
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        },
        {
            test: /\.scss$/,
            use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
        },
        {
            test: /\.(png|jpe?g|gif)$/i,
            loader: 'file-loader',
            options: {
                name: 'images/[name].[ext]',
            }
        }
    ]
},
plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
        filename: 'style.[contenthash].css'
    }),
    new FileManagerPlugin({
        onEnd: {
            copy: []
        }
    }),
    new HtmlWebpackPlugin({
        inject: false,
        hash: true,
        template: './src/index.html',
        filename: 'index.html'
    }),
    new WebpackMd5Hash()
]

}

包.json

"devDependencies": {
"autoprefixer": "^9.7.3",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.1",
"cssnano": "^4.1.10",
"file-loader": "^5.0.2",
"filemanager-webpack-plugin": "^2.0.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.1",
"vue-loader": "^15.7.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0",
"webpack-md5-hash": "0.0.6"
},
"dependencies": {
  "@babel/core": "^7.7.4",
  "bootstrap": "^4.4.1",
  "jquery": "^3.4.1",
  "popper.js": "^1.16.0",
  "vue": "^2.6.10"
}

index.js

import 'vue';

索引.html

    </footer>
<script src="js/main.66905f9e91666cf52fc4.js?da38ad338a15dcb4c609"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            setMessage: function(event){
                this.message = event.target.value;
            }
        }
    })
</script>