Vue.js 代码不适用于 Webpack答案

【问题标题】：Vue.js Codes Not Work With WebpackVue.js 代码不适用于 Webpack
【发布时间】：2018-06-22 17:06:01
【问题描述】：

我正在使用 Webpack 和 Vue.js。我有非常简单的代码，就像这样：

<div id="msg">
    <h1>{{msg}}</h1>
</div>

new Vue({
   el: '#msg',
   data:{
       msg:'Hello'
   }
});

如果我直接在Index.html 使用vue.js，那么我的代码可以正常工作，但是如果我在单独的js 文件中导入vue.js，那么我会出错：

Uncaught ReferenceError: Vue is not defined at index.html?_ijt=e0ucco3tsm7no18s2or5votcio:305

导入vue.js 单独js 像这样的文件：

import Vue from 'vue';

在我的控制台上，我可以看到 Vue 加载没有问题：

You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html

我想知道我的问题在哪里？为什么我的代码没有运行？而且我不得不说我正在使用index.js 文件来加载我的所有样式和JSCodes。

这里有更多信息：

"devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2017": "^6.24.1", "cross-env": "^5.1.3", "css-loader": "^0.28.8", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.6", "jshint": "^2.9.5", "jshint-loader": "^0.8.4", "lodash": "^4.17.4", "node-sass": "^4.7.2", "sass-loader": "^6.0.6", "style-loader": "^0.19.1", "vue": "^2.5.13", "vue-awesome-swiper": "^3.1.0", "vue-cli": "^2.9.2", "webpack": "^3.10.0" },

const webpack = require('webpack');
const paths = require('path');
module.exports = {
entry: './js/index.js',
output: {
    filename: 'shop.js',
    path: paths.resolve(__dirname, 'files/js')
},
module: {
    rules: [
        {
            test:/\*.vue$/,
            loader: 'vue-loader'
        },

        /* Babel For ES 6*/
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    "presets": ["es2017"]
                }
            }
        },
        //Sass Loader
        {
            test: /\.s[ac]ss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        },
        //File Loader For Fonts
        {
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name:`[path][name].[ext]`,
                    }
                }
            ]
        },
        //File Loader For IMG
        {
            test: /\.(jpg|jpeg|png|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name:`[path][name].[ext]`,
                    }
                }
            ]
        }
    ]
  }
 };

【问题讨论】：

标签： javascript jquery node.js webpack vuejs2

【解决方案1】：

您的开发依赖项似乎没有vue-loader。您已将.vue 文件注册到#msg。尝试全局注册，看看是否需要重新考虑如何注册它们。

要注册一个全局组件，可以使用 Vue.component(tagName, options)。例如：

Vue.component('my-component', {
  // options
})

此外，如果您在 web pack 中使用 vue 加载器，您可能希望使用 es 模块选项，如下所示：

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        esModule: true,
        extractCSS: true
    }
}

我将给出一个帮助我进行 vue.js 开发的提示是将您的 html、js 和 css 分离到它们自己的文件中，并将它们注入到一个 vue 文件中。这将使您更容易将 js 文件注入/导入到其他文件中，而不会导致加载器出现问题。

【讨论】：

【解决方案2】：

使用官方工具启动项目

vue-cli

或

vuejs-templates

【讨论】：