關(guān)于vue-cli打包的問題

如圖1，config里index.js的assetsPublicPath 已經(jīng)改為“./”，為什么打包后打開dist里的index.html報錯（如圖2）？
圖片描述

回答

編輯回答

雅痞

config里index.js的assetsPublicPath 已經(jīng)改為“./”

這是要你放的目錄決定的，而不是全部改成這樣

2018年5月28日 09:58

編輯回答

傻丟丟

./ 改成 /

2017年10月26日 15:59

編輯回答

未命名

https://github.com/smallyunet...

2017年10月5日 22:20

編輯回答

別傷我

build 下面的 utils 文件

  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader];
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      });
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    
    // 主要是下面的這個  publicPath  你的是因?yàn)閏ss那里的資源路徑不對
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',
        fallback: 'vue-style-loader'
      });
    } else {
      return ['vue-style-loader'].concat(loaders);
    }
  }

2018年9月20日 04:58

編輯回答

浪蕩不羈

關(guān)鍵還是看你怎么打開的，要根據(jù)你的根目錄寫路徑的

2018年4月25日 19:35

編輯回答

喜歡你

如果你的圖片引用正確的話，在webpack.base.config.js里面的圖片那個loader加個publicPath: '../../';有時候問題出在你圖片放置的路徑或者說你引用圖片寫的路徑。

2018年9月21日 06:40

編輯回答

清夢

很好解釋，建議多了解webpack的打包機(jī)制。
看樣子你是拿著vue-cli直接使用的對吧，那就以這個為出發(fā)點(diǎn)找問題。
問題就是出在assetsPublicPath上。
假設(shè)你的出口是dist

    output: {
        publicPath: assetsPublicPath
    }

assetsPublicPath最終會被引用到這里。

舉例說明：

    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      }

這是vue-cli的url-loader，它會把圖片都打包到./dist/img文件夾下。
publicPath的作用是替換絕對路徑。
設(shè)置為'./'，最終會以./dist/js/app.js這個app.js為索引，向你所有的js內(nèi)的資源路徑前邊加上'./'，這樣的對于app.js來說根目錄就是js文件夾，是錯誤的。根據(jù)上邊url-loader的配置，js/img是沒有的。應(yīng)該是../js/img。
所以你報錯了。
將publicPath填入你服務(wù)器的絕對地址才對，這樣所有文件的根目錄是dist。

2018年7月29日 05:16

編輯回答