Vue CLI打包如何设置文件路径

在 Vue CLI 中，可以通过配置 `vue.config.js` 文件来设置打包后文件的路径。具体步骤如下：

1. 在项目根目录下新建 `vue.config.js` 文件。

2. 在 `vue.config.js` 中添加如下代码：

   module.exports = {
     publicPath: '/your-path/'
   }

其中 `publicPath` 为设置打包后文件的路径。

3. 执行 `npm run build` 命令重新打包项目。

在打包完成后，文件将会生成在以 `publicPath` 为路径的文件夹下。例如，如果将 `publicPath` 设置为 `/myapp/`，则打包后的文件将会生成在 `myapp` 文件夹下。在部署时，只需要将该文件夹中的所有文件上传到 Web 服务器即可。

除了 `publicPath` 外，还可以通过配置 `outputDir` 来设置打包后的文件夹名称，例如：

module.exports = {
  outputDir: 'myapp',
  publicPath: '/myapp/'
}

这样，在执行 `npm run build` 命令时，Vue CLI 会将打包后的文件生成在以 `outputDir` 为名称的文件夹下。

相关问题

如何 用 vueCli 打包指定文件

你可以使用 vue-cli-service build 命令来打包指定文件。具体操作步骤如下：

1. 在终端中进入到你的 Vue 项目根目录下。
2. 执行以下命令：vue-cli-service build 文件路径，其中，文件路径是指你要打包的文件路径，例如：vue-cli-service build src/main.js。
3. 打包完成后，你可以在 dist 目录下找到打包后的文件。

需要注意的是，你在执行打包命令时，需要保证文件路径正确，否则可能会导致打包失败。另外，你也可以通过配置 webpack 的 entry 属性来指定入口文件，这样在执行打包命令时，就不需要再指定文件路径了。

vue2 打包后 dist文件路径出错

可能是你的配置文件中没有正确设置打包后的文件路径，或者在使用时没有正确引用路径。

如果你使用的是 vue-cli，可以检查一下 `vue.config.js` 文件中的配置是否正确设置了 `outputDir`，例如：

module.exports = {
  outputDir: 'dist',
  // ...
}

如果你手动配置 webpack，则需要检查 `output` 配置是否正确设置了 `path`，例如：

output: {
  path: path.resolve(__dirname, 'dist'),
  // ...
}

另外，如果你在引用打包后的文件时使用了相对路径，也有可能出现路径错误的情况。建议使用绝对路径或者 webpack 提供的别名来引用文件。

例如，在 vue-cli 中，可以在 `vue.config.js` 中使用 `chainWebpack` 配置别名：

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('@', path.resolve(__dirname, 'src'))
  },
  // ...
}

然后在代码中就可以使用 `@/` 来引用 src 目录下的文件了。