vue-cli webpack模板项目搭建及打包时路径问题的解(5)

6.config/index.js

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
 // 构建产品时使用的配置
 build: {
  // webpack的编译环境
  env: require('./prod.env'),
  // 编译输入的index.html文件
  index: path.resolve(__dirname, '../dist/index.html'),
  // webpack输出的目标文件夹路径
  assetsRoot: path.resolve(__dirname, '../dist'),
  // webpack编译输出的二级文件夹
  assetsSubDirectory: 'static',
  // webpack编译输出的发布路径
  assetsPublicPath: '/',
  // 使用SourceMap
  productionSourceMap: true,
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  // 默认不打开开启gzip模式
  productionGzip: false,
  // gzip模式下需要压缩的文件的扩展名
  productionGzipExtensions: ['js', 'css'],
  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
 },
 // 开发过程中使用的配置
 dev: {
  // webpack的编译环境
  env: require('./dev.env'),
  // dev-server监听的端口
  port: 8080,
  // 启动dev-server之后自动打开浏览器
  autoOpenBrowser: true,
  // webpack编译输出的二级文件夹
  assetsSubDirectory: 'static',
  // webpack编译输出的发布路径
  assetsPublicPath: '/',
  // 请求代理表,在这里可以配置特定的请求代理到对应的API接口
  // 例如将'/api/xxx'代理到'www.example.com/api/xxx'
  proxyTable: {},
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  // 是否开启 cssSourceMap
  cssSourceMap: false
 }
}

在使用npm run build进行webpack打包后,发布的项目可能会遇到图片等找不到的情况。

这里有一个万能解决办法:

    1. 将config/index.js 里面的 assetsPublicPath:'/' 改为assetsPublicPath:'./'  

    2. build/util.js里面的

  if (options.extract) {
       return ExtractTextPlugin.extract({
              use: loaders,
              fallback: 'vue-style-loader',
              publicPath:'/'
  })

    将其中的publicPath改为:publicPath:'../../'就可以了。这样打包出来的路径就是正确的了。

    第一个是为了改变js中引入图片的路径,改为./ 就是指在当前路径,这个.代表的路径就是assetsRoot+assetsSubDictionary,我这里定位到dist/static/ ,加上图片前缀img,就可以找到了。