作品分享
问答交流
发现
任务
客服工单
{ "name": "yydpt_vue2_base", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack", "dev-build-server": "webpack --config ./webpack.dev.config.js --progress", "dev-server": "webpack-dev-server --open chrome --config ./webpack.dev.config.js --progress" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.17.8", "@babel/preset-env": "^7.16.11", "babel-loader": "^8.0.5", "css-loader": "^3.5.3", "html-webpack-plugin": "^4.3.0", "style-loader": "^1.2.1", "vue": "^2.7.0", "vue-cli": "^2.9.6", "vue-loader": "^15.10.0", "vue-template-compiler": "^2.6.12", "webpack": "^4.46.0", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.11.0" }, "dependencies": { "vue": "^2.7.0", "vue-cli": "^2.9.6", "webpack": "^4.46.0", "webpack-dev-server": "^3.11.0" } }
const path = require('path'); const { VueLoaderPlugin }=require("vue-loader") var HtmlWebpackPlugin = require('html-webpack-plugin'); // 把打包后的文件直接注入到html模板中 module.exports = { mode:'development', // 设置开发模式 output:{ path:path.resolve(__dirname,'./build/development'), // 动态获取出口路径(绝对路径)-文件编译后的位置 filename:'bundle.js' // 出口文件名 }, devServer:{ port:8888, // 设置端标语,假如没有设置,会默认端标语 }, module: { rules: [ { test: /\.(js)$/, use: { loader: "babel-loader", options: { presets: ['@babel/preset-env'], } }, exclude: /node_modules/ },{ test:/\.(css)$/, use:[{ loader:"style-loader" // 将全部的盘算后的样式参加页面中,html页面中插入css代码 },{ loader:"css-loader", // 分析CSS样式,可以用模块的方式手动对象情势写样式,style-loader主动处理了这个注入 },//可以大概使用雷同@import 和 url(...)的方法实现 require()的功能 ] },{ test:/\.(vue)$/, use:{ loader:"vue-loader" } } ], }, plugins:[ new VueLoaderPlugin(), new HtmlWebpackPlugin({ // 把打包后的文件直接注入到html模板中 title:'平台', template:path.join(__dirname, "./src/index.html"), // 指定模板页面 filename: 'index.html', // 模板的名称 inject: 'body', // 将编译的vue的js文件注入到模板页面的body内 }) ], }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue2</title> </head> <body> <div id="app"></div> </body> </html> App.vue 代码: <template> <div> {{welcome}} </div> </template> <script> export default { name:"vue2", data() { return { welcome: "月影WEB 欢迎各人来学习各种技能知识!" } } } </script> <style> </style>
举报
本版积分规则 回帖后跳转到最后一页
Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )
GMT+8, 2025-8-8 23:05, Processed in 0.159261 second(s), 35 queries.© 2003-2025 cbk Team.