webpack 搭建 vue專案環境
目錄結構：
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"></div> <script src="/dist/main.js"></script> </body> </html>
main.js
import Vue from 'vue' import App from './App.vue' import MM from '../packages/index' Vue.config.productionTip = false Vue.use(MM) var app = new Vue({ el: '#app', template:'<App/>', components: { App } })
app.vue
<template>
<div id="app" style="height:100%">
<VueCalendar />
</div>
</template>
<script>
export default {
name: 'app',
methods: {
},
mounted () {
}
}
</script>
<style>
</style>
包檔案:
{ "name": "vx-component", "version": "1.0.0", "description": "", "main": "dist/main.js", "private": false, "scripts": { "dev": "webpack-dev-server --open --config webpack.config.js", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "wenguang.xia", "license": "ISC", "devDependencies": { "@babel/core": "^7.10.3", "@babel/preset-env": "^7.10.3", "babel-loader": "^8.1.0", "clean-webpack-plugin": "^3.0.0", "css-loader": "^3.6.0", "html-webpack-plugin": "^4.3.0", "style-loader": "^1.2.1", "url-loader": "^4.1.0", "vue-loader": "^15.9.3", "vue-template-compiler": "^2.6.11", "webpack": "^4.43.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0" }, "dependencies": { "vue": "^2.6.11" } }
webpack.config.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.join(__dirname, './dist'),
publicPath: '/dist/',
filename: 'main.js'
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' //內部為正則表示式 vue結尾的
}
},
devServer: {
historyApiFallback: true,
overlay: true
},
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpg|gif|svg|bmp)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: '[path][name].[ext]'
}
}
]
},
// {
// test: /\.(woff|woff2|eot|ttf|otf)$/,
// use: [
// {
// loader: 'file-loader',
// options: {
// name: '[path][name].[ext]',
// context: 'src',
// },
// },
// ],
// }
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'vx-component'
}),
new VueLoaderPlugin(),
],
}
遇到的問題
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
vue有兩種形式的程式碼 compiler（模板）模式和runtime模式（執行時），vue模組的package.json的main欄位預設為runtime模式， 指向了"dist/vue.runtime.common.js"位置。
這是vue升級到2.0之後就有的特點。而我的main.js檔案中，初始化vue卻是這麼寫的，這種形式為compiler模式的，所以就會出現上面的錯誤資訊
// compiler new Vue({ el: '#app', template: '<App/>', components: { App } })
方法一: 將main.js中的程式碼修改如下就可以
//runtime new Vue({ render: h => h(App) }).$mount("#app")
方法二：webpack配置檔案裡有個別名配置，具體如下
resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' //內部為正則表示式 vue結尾的 } }
方法三:那就是在引用vue時，直接寫成如下即可
import Vue from 'vue/dist/vue.esm.js'
[Vue warn]: Unknown custom element:– did you register the component correctly? For recursive components, make sure to provide the “name” option
這個報錯是因為找不到 這個元件導致的，對於新手來說，這是個坑，因為vue要求如果建立元件時使用駝峰命名，呼叫元件的時候需要將駝峰改為橫線-寫法
注：用vue-lodaer處理單檔案元件後就不存在這樣的問題了