vue编译后的路径问题(包括传CDN)

本地项目代码:


编译之前的配置:

1.config/index.js

assetsPublicPath改为'./' (约46行)

该配置文件下的其他字段含义:

    //打包后文件要存放的路径
    assetsRoot: path.resolve(__dirname, '../dist'),
    //打包后除了index.html之外的静态资源要存放的路径
    assetsSubDirectory: 'static',
    //打包后,index.html里面引用资源的相对地址
    // assetsPublicPath: '/',
    assetsPublicPath: './',

2.build/webpack.prod.conf.js

output下新增publicPath:'./' (约29行)

如果需要将静态资源放到CND上,则需要将publicPath改为相应的域名,例如:

publicPath:'http://testactjp.papasg.com/fe/s6/'

3.build/utils.js

publicPath: '../../'(约51行)

具体位置如下

 if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../' //新增
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

4.build/webpack.base.conf.js

如不想图片走Base 64模式,可以将options下面的limit改为1(意思是小于1的资源会被编译成Base 64,但是改为0不行,这样打包后的文件夹里面就不包含img文件夹了)
具体位置:(约44行)

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

在以上代码中,如果将name改为已注释掉的这一行,编译后的图片名字依旧还是自己命名的样子,坏处是每次更换图片都需要收到加版本号,即使用hash:7的模式自动加了版本号,也不影响本地开发,因为本地开发的时候,图片路径同样自动用同样的方式加了版本号。


1.打包后,dist/static文件夹下面的img文件夹里面不在包含文件夹了,所以开发的时候assets/images文件夹下面最好不要再包含文件夹了,如果必要情况下需要添加文件夹,需要保证文件夹下的文件不重名,否则会被覆盖。
2.npm起的服务如果将路由的mode由默认的hash改为history,打包后放到测试环境组件会加载不出来

你可能感兴趣的:(vue编译后的路径问题(包括传CDN))