如何将 Vue.js 项目打包并部署到 PC 端
<ol>
<li>
<p>在项目根目录下创建一个新文件夹，命名为'dist'（distribution 的缩写），用于存放打包后的文件。</p>
</li>
<li>
<p>安装打包工具 webpack 和 webpack-cli。</p>
<pre><code></code></pre>
</li>
</ol>
<p>npm install webpack webpack-cli --save-dev</p>
<pre><code>
3. 在项目根目录下创建一个新文件，命名为'webpack.config.js'，用于配置 webpack 打包规则。
</code></pre>
<p>const path = require('path');</p>
<p>module.exports = {
mode: 'production',
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}</p>
<pre><code>
- mode：指定打包模式，可选值为 development（开发模式）和 production（生产模式）。
- entry：指定打包入口文件路径。
- output：指定打包输出文件路径和文件名。
- module：指定打包规则，比如针对不同类型的文件使用不同的加载器。
- resolve：指定 Vue.js 的别名，以便在代码中使用更简短的引用方式。
4. 安装 vue-loader 和 vue-template-compiler。
</code></pre>
<p>npm install vue-loader vue-template-compiler --save-dev</p>
<pre><code>
5. 在 package.json 文件中添加以下脚本：
</code></pre>
<p>"scripts": {
"build": "webpack --config webpack.config.js"
}</p>
<pre><code>
这样就可以通过运行命令 "npm run build" 来进行打包了。
6. 在 HTML 页面中引入打包后的文件。
</code></pre>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
```
<ol start="7">
<li>运行命令 "npm run build" 进行打包，打包完成后在浏览器中打开 HTML 页面即可看到 Vue.js 应用程序运行的效果。</li>
</ol>
原文地址: https://www.cveoy.top/t/topic/mHzg 著作权归作者所有。请勿转载和采集!