使用Vue開發Web應用時，我們經常需要將Vue項目進行打包，生成靜態文件，放到Web服務器中供用戶訪問。但是，當我們將Vue項目中的所有靜態資源打包到同一目錄下后，我們需要對該目錄下的index.html中的靜態資源路徑進行改變，才能確保所有資源都能被正確加載。
// 打包前 assets/ |-- css/ | `-- some.css |-- js/ | `-- some.js |-- img/ | `-- some.png `-- index.html // 打包后 dist/ |-- css/ | `-- some.[hash].css |-- js/ | `-- some.[hash].js |-- img/ | `-- some.[hash].png `-- index.html
在生產環境下，我們可以使用Webpack插件 "html-webpack-plugin" 自動將靜態資源路徑改變為絕對路徑。但是，在開發環境下，Webpack不會生成靜態資源文件，所以我們需要手動處理靜態資源路徑。
// index.html 文件Vue // 修改后的 index.html 文件Vue
對于靜態資源路徑的改變，我們可以手動修改每個HTML文件，但是當項目比較大時，這個工作量會非常大。解決這個問題的方法是使用Webpack的CopyWebpackPlugin插件，將需要的靜態資源一并拷貝到打包后的目錄下。另外，我們還需要將靜態資源的路徑改變為絕對路徑。
// webpack.config.js 配置文件
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
// ...
plugins: [
new CopyWebpackPlugin([
{
from: 'src/assets',
to: 'assets'
}
])
]
}
// index.html 文件Vue 使用以上方法，我們可以使打包后的Vue項目在任意路徑下正確地加載資源。