极客观点
项目管理
HarmonyOS
用 npm init 建了一个 webpack + vue 的项目，build运行没发现有什么问题，但 vue 组件显示不出来，不知为何，怀疑是不是配置的问题，烦请指教，谢谢。
代码结构
├── dist
│ ├── app.bundle.js
│ ├── app.bundle.js.map
│ ├── index.html
│ ├── style.css
│ ├── style.css.map
├── package.json
├── package-lock.json
├── src
│ ├── App.vue
│ ├── index.html
│ └── index.js
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js
dist 为输出目录，源代码都在 src 下，webpack 配置文件有 webpack.dev.js 和webpack.prod.js，两者扩展 webpack.common.js 的基础配置。
index.js 内容
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
template: '<App/>',
components: { App }
});
App.vue 内容
<template>
<div id="app">
<div>{{ msg }}</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
<style>
html {
background: #333;
color: #fff;
font-size: 20px;
}
</style>
index.html 内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
打包输出的 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link href="style.css" rel="stylesheet"></head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="app.bundle.js"></script></body>
</html>
webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry: {
app: './src/index.js',
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin(['dist']),
new ExtractTextPlugin("style.css")
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
extractCSS: true
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
};
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
});
webpack.prod.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'source-map',
plugins: [
new UglifyJSPlugin({
sourceMap: true
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
]
});
package.json
{
"name": "fancy-clone",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch": "webpack --watch --config webpack.dev.js",
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"style-loader": "^0.19.1",
"uglifyjs-webpack-plugin": "^1.1.4",
"vue": "^2.5.13",
"vue-loader": "^13.6.0",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7",
"webpack-merge": "^4.1.1"
}
}
找到问题了，首先运行时浏览器有这么个告警：
网上搜了一下找到下面的解决办法：
https://forum.vuejs.org/t/vue...
问题是：