python - WebPack+Vue构建HTML报错
本文介绍了python - WebPack+Vue构建HTML报错的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
先上一张报错截图，
package.json文件内容如下
{
"name": "x-",
"version": "0.0.1",
"description": "x",
"main": "main.js",
"scripts": {
"start": "webpack-dev-server",
"server": "webpack-dev-server --inline --hot"
},
"keywords": [],
"engines": {
"node": ">= 6.7.0"
},
"author": "",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.8.0",
"babel-preset-es2015": "^6.16.0",
"css-loader": "^0.25.0",
"html-webpack-plugin": "^2.22.0",
"style-loader": "^0.13.1",
"unminified-webpack-plugin": "^1.1.1",
"vue": "^1.0.26",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^8.5.0",
"vue-router": "^0.7.13",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"
}
}webpack.config.js文件内容
/**
* Created by Administrator on 2016/10/6.
*/
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: { // 唯一入口文件
main: __dirname + "/src/main.js",
},
output: { // 出口
path: __dirname + "/build/", // 输出的目录
filename: "js/[name].js" // 保存的文件名，name==main
},
devServer: { // webpack-dev-server配置
contentBase: "./build", // 路径
host: "localhost", // 主机
port: "80", // 端口
color: true // 代码带颜色的
},
module: { // 模块
loaders: [
{ // vue文件
text: /\.vue$/,
loader: "vue"
},
{
test: /\.css$/, // 文件类型
loader: 'style-loader!style-loader' // 使用什么插件解析 style-loader:编译CSS文件为JS文件 style-loader:使用require导入CSS文件
},
{
test: /\.js$/,
exclude: /node_modules/, // 这个目录下面的js文件不需要编译
loader: 'babel', // babel的loader插件名称
query: {
presets: ['es2015'] // 将ES6转换为ES5格式的JavaScript代码
}
}
]
},
plugins: [ // 插件
new webpack.HotModuleReplacementPlugin(), // --hot 改动的页面单独加载，而不是整个页面
new HtmlWebpackPlugin(), // HTML和JS一起打包
new webpack.optimize.UglifyJsPlugin({ // JS代码压缩
compress: {
warnings: false
}
}),
],
};main.js
/**
* Created by Administrator on 2016/10/6.
*/
var Vue = require("vue");
var VueRouter = require("vue-router");
var Routers = require("./router");
var App = require('./components/app.vue');
console.log("main.js");
Vue.use(VueRouter);
// 开启debug模式
Vue.config.debug = true;
// 创建vue-router实例
var router = new VueRouter();
// 把路由的配置传过来
router.map(Routers);
// 启动
router.start(App, '#app');index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>
解决方案
加上这个
{
test: /\.html$/,
loader: 'vue-html'
}使用 vue-cli 创建项目比较好，特殊要求可以在上面改
这篇关于python - WebPack+Vue构建HTML报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
