2018年6月 – 爱梦小屋

来源：https://blog.csdn.net/w1170375057/article/details/79036694
关于在vue项目中资源路径问题
在写vue项目时往往面临这些问题
1. 图片引入使用绝对路径，不会经过编译，小图片不会编译成base64形式
2. 打包之后的文件，全部使用绝对路径，部署时带来大量路径问题
其实这些问题都可以通过对webpack的配置文件进行更改来解决

资源路径
在引入资源时使用，别名alias，vue init webpack生成的项目在build/webpack.base.conf.js文件中进行更改


    alias: {
        'vue$': 'vue/dist/vue.esm.js', // 默认的
        '@': resolve('src'),  // 默认的
        'assets': resolve('src/assets')  // 自己定义的
    }

之后再项目中就可以使用了


 img src="~assets/images/[图片名]"> // images: src/assets 下存放图片的文件夹

backgroud: url(~assets/images/[图片名])
js中直接用 assets/...，不需要加 ~

打包 build时
打包时，可以将路径全部改成相对路径，个人认为有利于部署，以下配置为在使用上一条配置的情况下进行
1. 修改config/index.js文件中build对象中的


assetsPublicPath: '/'  // 改为： 
assetsPublicPath: './'

修改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)
}

欢迎大家指出问题，一起交流。

月度归档： 2018年6月

vue-cli资源路径问题(webpack)