關於在vue專案中資源路徑問題

在寫vue專案時往往面臨這些問題
1. 圖片引入使用絕對路徑，不會經過編譯，小圖片不會編譯成base64形式
2. 打包之後的檔案，全部使用絕對路徑，部署時帶來大量路徑問題
其實這些問題都可以通過對webpack的配置檔案進行更改來解決

資源路徑

在引入資源時使用，別名alias，vue init webpack生成的專案在build/webpack.base.conf.js檔案中進行更改

alias: {
  'vue$': 'vue/dist/vue.esm.js', // 預設的
  '@': resolve('src'
 
),  // 預設的，可自定義
}

之後再專案中就可以使用了
<img src="@/assets/images/[圖片名]"> // images: src/assets 下存放圖片的資料夾
backgroud: url([email protected]/assets/images/[圖片名])
js，HTML中 直接用 @/...，不需要加 ~

打包 build時

打包時，可以將路徑全部改成相對路徑，個人認為有利於部署，以下配置為在使用上一條配置的情況下進行
1. 修改config/index.js檔案中build物件中的

assetsPublicPath
 
: '/'  // 改為： 
assetsPublicPath: './'

1. 修改build/utils.js, 針對css樣式檔案，因為在使用別名的情況下，打包出來的css檔案中資原始檔的引入方式為 static/*

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
 

  })
} else {
  return ['vue-style-loader'].concat(loaders)
}
// 新增一條屬性publicPath
// publicPath (打包時改用相對路徑，在static/*前面加上publicPath)
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

歡迎大家指出問題，一起交流。