修改vue+webpack run build的路径方法

下面是修改vue+webpack run build的路径方法的详细攻略。

1. 理解打包路径

在修改打包路径之前，我们首先需要理解打包路径的概念。在使用vue-cli构建项目时，我们可以通过执行npm run build命令来进行打包，打包后的文件默认会被生成到dist目录下。如果我们需要修改打包后文件的输出路径，那么就需要修改webpack的配置文件。

2. 修改webpack配置文件

vue-cli生成的项目模板默认使用的是webpack 4.x，因此我们需要修改webpack.prod.conf.js配置文件。

在该文件中，我们需要进行以下几个步骤：

2.1 修改output.path属性

我们可以通过修改output.path属性来指定打包后文件的输出路径。我们可以在webpack.prod.conf.js文件中找到以下代码：

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

这里的config.build.assetsRoot指的就是打包后文件的输出路径，我们可以将其修改为我们想要的路径，例如：path: path.resolve(__dirname, '../dist')。

2.2 修改publicPath属性

修改output.path后，我们还需要修改output.publicPath属性。publicPath属性指定了项目中资源文件的引用路径，它会将生成的JS/CSS/图片等资源文件的前缀路径修改为我们指定的路径。

我们可以在webpack.prod.conf.js文件中找到以下代码：

output: {
    ...
    publicPath: config.build.assetsPublicPath
}

这里的config.build.assetsPublicPath指的是打包后静态资源文件的引用路径，我们可以将其修改为我们想要的路径。

2.3 示例说明

示例1：将打包后的文件输出到build目录下

// webpack.prod.conf.js

const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const webpackConfig = merge(baseWebpackConfig, {
  mode: 'production',
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
    publicPath: '/'
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false
          }
        },
        sourceMap: config.build.productionSourceMap,
        parallel: true
      }),
      new OptimizeCSSPlugin({
        cssProcessorOptions: config.build.productionSourceMap
          ? { safe: true, map: { inline: false } }
          : { safe: true }
      })
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/prod.env')
    }),
    new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[chunkhash].css'),
      chunkFilename: utils.assetsPath('css/[id].[chunkhash].css')
    })
  ]
})

module.exports = webpackConfig

在该示例中，我们将打包后的文件输出到了build目录下，并且将引用路径指定为了根路径/。

示例2：将打包后的文件输出到build目录下的web目录

// webpack.prod.conf.js

const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const webpackConfig = merge(baseWebpackConfig, {
  mode: 'production',
  output: {
    path: path.resolve(__dirname, '../build/web'),
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
    publicPath: '/web/'
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false
          }
        },
        sourceMap: config.build.productionSourceMap,
        parallel: true
      }),
      new OptimizeCSSPlugin({
        cssProcessorOptions: config.build.productionSourceMap
          ? { safe: true, map: { inline: false } }
          : { safe: true }
      })
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/prod.env')
    }),
    new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[chunkhash].css'),
      chunkFilename: utils.assetsPath('css/[id].[chunkhash].css')
    })
  ]
})

module.exports = webpackConfig

在该示例中，我们将打包后的文件输出到了build/web目录下，并且将引用路径指定为了/web/。