如何打包部署vue2脚手架编写的项目

如果你需要将 Vue 2 项目打包，并且指定上下文路径（publicPath）为 'film'，你可以在项目的 vue.config.js 文件中进行配置。以下是如何设置的步骤：

创建或修改 vue.config.js 文件： 在项目的根目录下创建或修改 vue.config.js 文件，并添加以下内容：

module.exports = {
  publicPath: '/film/', // 设置上下文路径
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
};

• publicPath：设置为 '/film/' 表示你的资源将会从这个路径开始加载。如果你的项目部署在子路径下，这个设置非常重要。
• outputDir：打包输出的目录，默认是 dist。
• assetsDir：静态资源（如图片、静态文件等）的输出目录。
• productionSourceMap：是否在生产环境生成 source map 文件，设置为 false 可以减少打包后的文件大小。

运行打包命令： 在项目根目录下运行以下命令来进行打包：

npm run build

或者如果你使用的是 Yarn：

yarn build

检查打包结果： 打包完成后，你会在 dist 目录下看到打包后的文件，包括 index.html 和 static 文件夹。

部署静态文件： 将 dist 目录下的所有文件上传到你的服务器，并确保服务器配置为从 /film/ 路径提供这些静态文件的服务。

请注意，如果你的服务器或托管服务不支持子路径部署，你可能需要额外的配置来正确地提供这些静态文件。例如，你可能需要一个服务器端的重写规则，将所有到 /film/* 的请求重写到 index.html 文件，以便 Vue Router 的历史模式（history mode）可以正常工作