Vue-cli 问题汇总以及解决方法

以下都是使用vue-cli生成的项目 vue: “^2.5.2”
1、图片打包路径问题

.g-warp{background: url('static/images/job/bg_head.jpg') 0 0 no-repeat;background-size:100%}

图片位置在static文件夹下 运行build后保存

Module build failed: ModuleNotFoundError: Module not found: Error: Can’t resolve ‘./static/images/job/bg_head.jpg’ in ‘E:\wechat\wechat-public\src\components’

痛哭之后的解决方法

1、改变css的引入方式

.g-warp{background: url('../../static/images/job/bg_head.jpg') 0 0 no-repeat;background-size:100%}

2、修改config/index.js 找到build下的Paths 修改 assetsPublicPath

// Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

3、修改build/webpack.prod.conf.js 找到output 增加 publicPath: ‘./’

 output: {
    publicPath: './',
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  }

其它

网上的很多都是修改build/utils.js 增加publicPath:”../../” 但是我并没有用

return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:"../../"
      })

 

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注