Vue.js代码不适用于Webpack
我用的是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
在单独的js文件中导入vue.js，如下所示：
import Vue from 'vue';
在我的控制台上，我可以看到Vue加载了No Problem：
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文件加载我的所有样式和JS代码。
这里有更多的信息：
"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]`,
}
}
]
}
]
}
};
回答 2
Stack Overflow用户
发布于 2018-01-09 13:43:33
您的开发依赖项中似乎没有vue-loader。您已将.vue文件注册到#msg。尝试全局注册，看看是否需要重新考虑如何注册它们。
要注册全局组件，可以使用Vue.component(tagName，options)。例如：
Vue.component('my-component', {
// options
})此外，当您在web包中使用vue加载程序时，您可能希望使用es模块选项，如下所示：
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: true,
extractCSS: true
}
}我将给出的一个技巧，这对我的vue.js开发很有帮助，那就是将你的html，js和css分离到它们各自的文件中，并将它们注入到一个vue文件中。这将使您更容易将js文件注入/导入到其他文件中，而不会导致加载器出现问题。
Stack Overflow用户
发布于 2018-01-08 18:40:14
https://stackoverflow.com/questions/48149492
复制
腾讯云开发者
