Vue项目打包部署全过程(history模式)

下面是Vue项目打包部署全过程（history模式）的完整攻略。

1. 打包项目

使用Vue CLI的build命令来打包项目，在项目根目录下的终端输入以下命令：

npm run build

这将把项目打包到dist目录中。打包完后，dist目录下会生成一个index.html文件和一些资源文件。

2. 配置服务器

使用Express框架来搭建服务器，先安装Express：

npm i express --save

配置服务器的核心代码如下：

const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

这里的关键是要设置一个*路由来捕捉所有的路由请求，然后返回index.html页面。

3. 配置路由

在Vue项目根目录中找到vue.config.js文件，添加如下配置：

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  indexPath: 'index.html',
  configureWebpack: {
    devServer: {
      historyApiFallback: true
    }
  }
};

其中，configureWebpack.devServer.historyApiFallback用来开启history模式。

示例说明

下面给出两个简单的示例，来说明上述步骤的具体实现。

示例1：基于Express框架

首先，我们创建一个Vue项目：

vue create vue-app

然后，进入项目目录，安装Express：

cd vue-app
npm i express --save

接着，创建一个server.js文件，作为Express的配置文件。其中，publicPath和outputDir要和vue.config.js中的对应：

const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

最后，执行以下命令启动服务器：

node server.js

在浏览器中访问localhost:3000即可查看打包部署后的Vue项目。

示例2：基于Nginx服务器

首先，我们假设已经在服务器上安装了Nginx。然后，将打包生成的文件放到/usr/share/nginx/html目录下。

接着，在Nginx配置文件中添加以下配置：

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

这里，try_files用来尝试查找文件。如果请求的是文件或目录，直接返回对应的文件或目录；否则返回index.html文件。

最后，启动Nginx服务：

service nginx start

在浏览器中访问服务器IP即可查看打包部署后的Vue项目。

以上就是Vue项目打包部署全过程（history模式）的完整攻略。