Vue專案打包常見問題整理

lifefriend_007發表於2018-12-27
Vue

Vue 專案在開發時執行正常，打包釋出後卻出現各種報錯，這裡整理一下遇到的問題，以備忘。

1、js 路徑問題

腳手架預設打包的路徑為絕對路徑，改為相對路徑。修改 config/index.js 中 build 節點下 assetsPublicPath，把原來 ‘/’ 改為 ‘./’

1 build: {
2     assetsPublicPath: `./`
3 }

2、img 路徑問題

在 build/utils.js 檔案中 ExtractTextPlugin extract 節點下，新增一行：publicPath: ‘…/…/’

1 if (options.extract) {
2     return ExtractTextPlugin.extract({
3         use: loaders,
4         fallback: `vue-style-loader`,
5         publicPath: `../../`
6     })
7 } else {
8     return [`vue-style-loader`].concat(loaders)
9 }

3、favicon.ico 問題

① 在 build/webpack.prod.conf.js 檔案中 new HtmlWebpackPlugin 節點下， 新增一行：favicon: config.build.favicon

1 new HtmlWebpackPlugin({
2     filename: config.build.index,
3     template: `index.html`,
4     favicon: config.build.favicon
5 })

② 在 config/index.js 檔案中 build 節點下，新增一行 ： favicon:path.resolve( __dirname, ‘…/src/favicon.ico’ )( PS：favicon.ico 放在 src 目錄下)

1 module.exports = {
2     build: {      
3         favicon:path.resolve(__dirname, `../src/favicon.ico`)
4     }
5 }

4、IE9+ 相容性問題

由於 axios 是基於 promise 之上實現的，在 IE 下會有相容性問題。

① 安裝 babel-polyfill

yarn add babel-polyfill

② 修改 build/webpack.base.conf.js 檔案中 entry 節點

1 entry: {
2     app: [`babel-polyfill`, `./src/main.js`]
3 }

5、禁止生成 .map 檔案

修改 src/config/index.js 中 productionSourceMap 值

productionSourceMap:false

 

相關文章