Vue-cli 创建项目关于资源路径问题

关于在vue项目中资源路径问题

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

资源路径

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

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

之后再项目中就可以使用了
// images: src/assets 下存放图片的文件夹
backgroud: url(~@/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)
}

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