vue-cli 打包配置问题

vue-cli 打包配置问题

问题

在使用vue-cli 默认配置进行打包时，编译完成后，打开index.html文件打开是空白的。打开浏览器检查错误信息发现是资源路径错误，加载不了css、js、img。

 解决

配置vue.config.js(没有的话在项目根目录手动创建)

const path = require('path')
module.exports = {
  // 基本路径   整个文件夹在哪
  publicPath: './',
  // 输出文件目录   文件夹名
  outputDir: 'dists',
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。    资源放的目录
  assetsDir: "./mobile_static",
  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径    index的路径和名字
  indexPath: './index.html',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // runtimeCompiler: true, // 运行时版本是否需要编译
  transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
  productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
  configureWebpack: {
     performance: {hints:false}// 关闭 webpack 的性能提示
  },
  css: {
    // 配置高于chainWebpack中关于css loader的配置
    // modules: true, // 是否开启支持‘foo.module.css’样式
    // extract: true, // 是否使用css分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用<style>方式内联至html文件中
    // sourceMap: false, // 是否在构建样式地图，false将提高构建速度
    loaderOptions: { // css预设器配置项
      // less: {
      //   loaderOptions: {
      //   data: `@import "@/assets/less/global.less";`
      //   }
      // }
    }
  },
  parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/assets/less/global.less')]
    }
  },
  pwa: {
    // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  },
  devServer: {
    open: true,
    host: '0.0.0.0',
    port: 8081,
    https: false,
    hotOnly: false,
    proxy: null
    // proxy: {

    // }
    // before: app => {}
  }
}

保存后重新编译打包

编译后的文件夹

双击打开index.html

正常显示，没有错误。OK