Vue打包路径配置过程

下面是 Vue 打包路径配置的完整攻略：

1. 理解打包路径

在 Vue 应用中，所有的资源文件都可以被打包（Bundle）到一起，如 JS、CSS、图片等等。在浏览器端使用时，需要访问打包后的文件，这些文件在浏览器中被认为是相对于 HTML 引用的路径来解析的。因此，我们需要对打包路径进行配置。打包路径分为两种情况：

• 在开发环境下使用的路径
• 在生产环境下使用的路径

这两者的打包路径需要分别进行配置。

2. 配置打包路径

2.1 配置开发环境下的打包路径

在开发环境中需要在 config/index.js 中配置 assetsPublicPath，找到以下代码：

module.exports = {
  dev: {
    assetsPublicPath: '/',
    // ...
  },
  // ...
}

assetsPublicPath 代表资源访问的 publicPath，这里我们把它设置为 /，即使用相对路径。如果需要使用绝对路径，可以设置为绝对路径，例如：

module.exports = {
  dev: {
    assetsPublicPath: 'http://yourdomain.com/',
    // ...
  },
  // ...
}

在设置了打包路径后，每次启动 npm run dev 启动应用时，资源路径将会被正确的处理。

2.2 配置生产环境下的打包路径

在生产环境中，打包路径需要在 webpack 配置文件中进行设置。可以通过 output.publicPath，或者在 HtmlWebpackPlugin 中的 publicPath 设置。

使用 output.publicPath 进行配置

可以在 config/prod.env.js 文件中添加环境变量：

module.exports = merge(prodEnv, {
  NODE_ENV: '"production"',
  PUBLIC_PATH: '"http://yourdomain.com/"' // 在这里添加
})

然后在 webpack.prod.conf.js 中使用这个环境变量：

const publicPath = process.env.PUBLIC_PATH // 从环境变量中获取打包路径

module.exports = merge(baseWebpackConfig, {
  output: {
    // ...
    publicPath: publicPath // 配置 publicPath
  },
  // ...
})

使用 HtmlWebpackPlugin 进行配置

在 webpack.prod.conf.js 中，找到 plugins 数组：

plugins: [
  // ...
  new HtmlWebpackPlugin({
    // ...
  }),
  // ...
],

在 HtmlWebpackPlugin 的配置项中添加 publicPath，例如：

plugins: [
  // ...
  new HtmlWebpackPlugin({
    filename: config.build.index,
    template: 'index.html',
    inject: true,
    minify: {
      // ...
    },
    // 在这里添加
    publicPath: 'http://yourdomain.com/'
  }),
  // ...
],

这样，发布生产环境的时候所有资源文件都使用了指定的公共路径。

3. 示例

3.1 示例1：使用相对路径

在 config/index.js 中，将 assetsPublicPath 修改为 './'，这样配置完成后，在访问资源时就是相对路径。如：

<link rel="stylesheet" href="./static/css/app.css">
<script src="./static/js/manifest.js"></script>

这种方式可以基本适用于所有项目，而且常用于开发阶段。

3.2 示例2：使用 CDN

在 config/prod.env.js 中，添加 CDN 地址环境变量：

module.exports = merge(prodEnv, {
  NODE_ENV: '"production"',
  PUBLIC_PATH: '"http://cdn.yourdomain.com/"'
})

在 webpack.prod.conf.js 中，使用环境变量：

const publicPath = process.env.PUBLIC_PATH

module.exports = merge(baseWebpackConfig, {
  output: {
    publicPath: publicPath
  },
  // ...
})

这种方式使用 CDN 可以有效地加速资源的打包和加载速度，适合于需要快速加载大量资源的项目。需要注意的是，使用 CDN 时应该考虑到 CDN 更新带来的版本更新问题，在静态资源有更改时，需要主动更新 CDN。