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。
如果文件不叫这个名字,或者不在这个位置。要改成对应的。