Webpack5 搭建 Vue2 项目 (Node.js 14.15.0)
<h2>使用 Webpack 5 搭建 Vue 2 项目 (适配 Node.js 14.15.0)</h2>
<p>本教程将指导你使用 Webpack 5 为 Vue 2 项目创建一个开发环境，并确保其与 Node.js 14.15.0 版本兼容。</p>
<p><strong>步骤 1：创建项目并初始化</strong>bashmkdir vue2-projectcd vue2-projectnpm init -y</p>
<p><strong>步骤 2：安装依赖</strong>bashnpm install vue@2 vue-loader@15 vue-template-compiler webpack webpack-cli webpack-dev-server --save-dev</p>
<p><strong>步骤 3：创建项目结构</strong></p>
<p>vue2-project/ - public/ - index.html - src/ - main.js - App.vue - webpack.config.js - package.json</p>
<p><strong>步骤 4：编写代码</strong></p>
<ul>
<li>
<p>**public/index.html:**html<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Vue 2 Project</title></head><body> <div id='app'></div> <script src='../dist/main.js'></script></body></html></p>
</li>
<li>
<p>**src/App.vue:**vue<template> <div> <h1>Hello, Vue 2!</h1> </div></template></p>
</li>
</ul>
<script>export default { name: 'App',};</script>
<ul>
<li>**src/main.js:**javascriptimport Vue from 'vue';import App from './App.vue';</li>
</ul>
<p>new Vue({ render: (h) => h(App),}).$mount('#app');</p>
<ul>
<li>**webpack.config.js:**javascriptconst path = require('path');</li>
</ul>
<p>module.exports = { mode: 'development', entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js', }, resolve: { extensions: ['.js', '.vue'], alias: { vue$: 'vue/dist/vue.runtime.esm.js', '@': path.resolve(__dirname, 'src'), }, }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader', }, ], }, devServer: { contentBase: path.resolve(__dirname, 'public'), port: 8080, },};</p>
<p><strong>步骤 5：配置启动脚本</strong></p>
<p>在 <code>package.json</code> 文件的 <code>scripts</code> 部分添加以下内容:</p>
<p>'scripts': { 'start': 'webpack serve --config webpack.config.js --open'}</p>
<p><strong>步骤 6：运行项目</strong>bashnpm start</p>
<p>这将在浏览器中打开 <code>http://localhost:8080/</code> 并显示 'Hello, Vue 2!'。</p>
<p><strong>总结</strong></p>
<p>本教程介绍了如何使用 Webpack 5 快速搭建 Vue 2 项目，并确保其与 Node.js 14.15.0 兼容。你可以根据自身项目需求对配置进行调整和扩展。</p>
原文地址: http://www.cveoy.top/t/topic/buAh 著作权归作者所有。请勿转载和采集!