一、打包项目

在vue.config.js中，插入publicPath字段：

PublicPath

Type: string
Default: '/'

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。

如果是开发环境，则默认即可，如果是需要打包成生产环境，则需要将PublicPath的值改为./，否则将无法成功定位静态资源

const { defineConfig } = require('@vue/cli-service')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',

  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'echarts': 'echarts'
    },
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  }
})

配置完成后，输入打包命令打包：

npm run build

打包完成后会生成dist文件夹，里面就是打包出来的文件。

二、部署到服务器

我这里使用的是宝塔面板，根据后端程序的语言创建站点

创建完成后，直接将dist文件夹内的文件上传到网站根目录

此时即可访问网站目录绑定的域名或IP地址访问了

三、刷新后404

部署到服务器后，会出现刷新后404的问题，解决这个问题只需要在Nginx中配置：

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

这段代码的意思就是如果找不到页面，就定位到index.html上

至此，完成项目部署