Penjelasan terperinci tentang skema konfigurasi projek Vue

Dengan pembangunan berterusan teknologi bahagian hadapan, Vue telah menjadi salah satu peneraju dalam rangka kerja bahagian hadapan. Apabila menggunakan Vue untuk membangunkan projek, kami perlu mengkonfigurasi projek untuk menyesuaikan diri dengan persekitaran dan keperluan kerja yang berbeza. Artikel ini akan membincangkan skema konfigurasi projek Vue secara terperinci.

1. Konfigurasi asas projek Vue

1. fail vue.config.js

Dalam direktori akar projek Vue, kami boleh mencipta fail bernama Ia adalah fail konfigurasi vue.config.js. Fail ini digunakan untuk mengkonfigurasi maklumat asas projek Vue, seperti laluan keluaran projek, publicPath, konfigurasi proksi dan pek web, dsb.

2. fail .env

Kami boleh menyimpan pembolehubah persekitaran yang diperlukan oleh projek dengan mencipta fail .env yang berbeza. Sebagai contoh, kita boleh mencipta fail .env.development, .env.pre-production dan .env.production untuk menyimpan pembolehubah persekitaran untuk pembangunan, pra-pengeluaran dan persekitaran pengeluaran masing-masing.

2. Konfigurasi nyahpepijat projek Vue

1. Peta Sumber

Melalui Peta Sumber, kami boleh memetakan kod yang disusun kepada kod asal. Dengan cara ini, ia akan menjadi lebih mudah apabila kami nyahpepijat projek. Kami boleh mendayakan Peta Sumber dalam vue.config.js melalui kod berikut:

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

2. DevTools

Alat pembangunan Vue menyediakan banyak kemudahan kepada pembangun juga merupakan bahagian penting dalam penyahpepijatan projek. Kami boleh membuka alat pembangunan Vue dengan menambahkan kod berikut pada projek:

Vue.config.devtools = true

3 Konfigurasi dioptimumkan bagi projek Vue

Konfigurasi yang dioptimumkan bagi projek Vue adalah untuk menambah baik. prestasi dan pengalaman.

1. Pembahagian Kod

Dengan membahagikan aplikasi kepada bahagian kecil, kami boleh mengurangkan masa pemuatan awal aplikasi. Projek Vue boleh menggunakan ciri pemisahan kod dalam Webpack untuk mencapai matlamat ini. Kita boleh mengkonfigurasinya dalam vue.config.js:

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}

2. Mampatan imej

Imej ialah sumber yang mengambil banyak trafik dalam halaman Oleh memampatkan imej Dengan pemampatan, kita boleh mengurangkan masa memuatkan halaman. Kita boleh menggunakan arahan berikut untuk memasang image-webpack-loader:

npm install image-webpack-loader --save-dev

dan kemudian konfigurasikannya dalam vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true
      })
      .end()
  }
}

3. Keep-Alive

Dalam versi Vue 2.x, kita boleh menggunakan komponen Keep-Alive untuk cache keadaan komponen untuk meningkatkan prestasi. Kami boleh menambah kod berikut pada komponen yang perlu dicache:

<keep-alive>
  <component></component>
</keep-alive>

4 Konfigurasi keselamatan projek Vue

1. CSP

module.exports = {
  devServer: {
    headers: {
      'Content-Security-Policy': "default-src 'self'"
    }
  }
}

HTTPS

module.exports = {
  devServer: {
    https: true
  }
}

Atas ialah kandungan terperinci Penjelasan terperinci tentang skema konfigurasi projek Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!