Vue项目打包部署全面总结，一文掌握！

2023-09-18 18:57:26

前言

Vue.js 是一个流行的前端框架，凭借其简洁的语法和丰富的功能，受到众多开发者的青睐。使用Vue做前后端分离项目时，通常前端是单独部署，用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。

打包

在部署之前，我们需要先将Vue项目打包成静态文件。这可以通过使用webpack来实现。webpack是一个打包工具，它可以将各种资源（如JavaScript、CSS、图片等）打包成一个或多个文件，以便在浏览器中运行。

npm install webpack --save-dev

安装完成后，在项目根目录创建一个名为 webpack.config.js 的文件，并添加以下配置：

module.exports = {
  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'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

然后，在命令行中运行以下命令来打包项目：

npm run build

打包完成后，会在项目根目录生成一个名为 dist 的文件夹，里面包含打包后的静态文件。

部署

接下来，我们需要将打包后的静态文件部署到服务器上。这里有两种常见的方式：

1. 使用nginx

nginx是一个轻量级的Web服务器，非常适合部署静态文件。首先，我们需要在服务器上安装nginx。然后，在nginx的配置文件中添加以下配置：

server {
  listen 80;
  server_name example.com;

  root /var/www/example.com/public;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

其中，/var/www/example.com/public 是打包后的静态文件所在路径。然后，重新加载nginx配置并启动nginx即可。