20

出力

    output: {
        path: config.build.assetsRoot,
        publicPath: process.env.NODE_ENV === 'production' ? 
        config.build.assetsPublicPath : config.dev.assetsPublicPath,
        filename: '[name].js'
    }

ベース

  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: false,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  },

ビルド後、インデックスページは正常に動作し、css background-image パスは次のようになります

background: url(./static/img/bg_certificate.c5cad1e.png) no-repeat 50%;

しかし、コンポーネント css background-image パス エラー、このように

background: url(static/img/btn_my.b9186cc.png) no-repeat 50%;

パスが「./」を失うように見えますが、

4

4 に答える 4

6

Vue 3 のコンポーネントでスタイルを使用しようとしたときにも、この問題が発生しました。次の構文を使用して解決しました。

background-image: url('~@/assets/image.png');
于 2021-09-08T12:54:20.353 に答える