1、在项目里创建以下文件。
webpack.config 是webpack配置文件。
index.html、main.js、app.vue是仿vue项目创建的文件结构。
可以自己调整位置。
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cbb</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
app.vue
<template>
<div id="app">
1111
</div>
</template>
<script>
export default {
name: "app"
}
</script>
main.js
import Vue from 'vue'
import MyApp from './app.vue'
new Vue({
render(h) {return h(MyApp)}
}).$mount('#app')
接下来是webpack的配置
'use strict';
const path = require('path'); // 引入路径插件
const htmlWebpackPlugin = require('html-webpack-plugin'); // 引入模板渲染插件
module.exports = {
//指定入口
entry: {
main: './main.js'
},
// 指定出口
output: {
path: path.join(__dirname, 'dist'),
filename: 'build.js'
},
plugins: [
new htmlWebpackPlugin({
template: './index.html',
})
],
module: {
rules: [{
test: /.vue$/,
loader: 'vue-loader'
}]
},
// 如果服务器遇到跨域问题，下面是配置代理，解决跨域
devServer: { //配置webpack-dev-server -> express服务器的选项
// host: 'localhost', // A
// port: 9999,
// //代理
// proxy: { //this.$ajax.get('/v2/xxxx')
// '/v2/*': { // 如果当前请求的url 是以/v2开头/xxxxxx,则默认请求127.0.1/v2/xxx
// changeOrigin: true, //changeOrigin就把当前本地express服务器由A变为向B请求并返回
// target: 'https://api.douban.com/', //B
// }
// }
}
}
请注意代码中红色的部分的位置分别指向你自己创建的main.js文件和index.html。
如果文件不叫这个名字，或者不在这个位置。要改成对应的。