[vue]--npm run build 打包问题

打包路径问题

默认打包路径是直接在根目录dist下进行打包，增加项目名部署会照成404 问题

• 修改 /config/index.js 下build 对象assetsPublicPath值‘./’：

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
  ...

图片文件过大，打包后404问题

npm 打包会生成static文件夹，一般static文件夹是比较干净的，只有css与js两个文件夹存在。如果打包后生成img或者其他文件夹时，说明文件过大，无法打包进入，webpack 默认10k。

• 修改webpack 设置，/build/webpack.base.conf.js

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1000000,  // 增大设置
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1000000,// 增大设置
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1000000,// 增大设置
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }