vue-cli4如何打包静态资源到指定目录

为了将静态资源打包到指定目录，我们需要修改vue.config.js文件，并设置publicPath和outputDir属性。以下是详细的攻略：

第一步：创建vue.config.js文件

我们需要在项目根目录下创建vue.config.js文件，并在该文件中设置publicPath和outputDir属性。如果原来不存在该文件，可以通过如下命令创建：

touch vue.config.js

第二步：设置publicPath和outputDir属性

在vue.config.js中，我们可以设置publicPath属性（即baseUrl，用于指定项目的公共路径）和outputDir属性（即输出目录）。具体设置可以参考如下示例：

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/your-project-url/'
    : '/',
  outputDir: 'dist/your-project-name'
}

在上述示例中，我们将outputDir设置为dist/your-project-name。这将导致打包后的静态资源（包括index.html文件、CSS样式文件、JS代码文件、图片、字体等文件）存放在dist/your-project-name目录下，其中index.html的路径为/dist/your-project-name/index.html。

示例说明一

我们假设我们的项目名为my-project，在打包后要将静态资源存放在public目录下。此时，我们应该如下设置：

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/',
  outputDir: 'dist/public'
}

打包后的静态资源将存放在dist/public目录下。

示例说明二

我们假设我们的项目名为my-project，在打包后要将静态资源存放在../public目录下（即将dist目录的上级目录public下）。此时，我们应该如下设置：

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/',
  outputDir: '../public/my-project'
}

打包后的静态资源将存放在../public/my-project目录下。

通过上述方法，我们可以轻松地将静态资源打包到指定目录。