vue項目實戰爬坑小記001

坑1. 用webpack打包後訪問index.html出現資源載入404問題

解決方案：config中index.js中，build對象中的assetsPublicPath屬性的層級需要由 ‘/’ 調整為 './'

 1  build: {
 2     env: require('./prod.env'),
 3     index: path.resolve(__dirname, '../dist/index.html'),
 4     assetsRoot: path.resolve(__dirname, '../dist'),
 5     assetsSubDirectory: 'static',
 6     assetsPublicPath: './',
 7     productionSourceMap: false,
12     productionGzip: false,
13     productionGzipExtensions: ['js', 'css'],
18     bundleAnalyzerReport: process.env.npm_config_report
19   }

 1 dev: {
 2     env: require('./dev.env'),
 3     port: 8080,
 4     autoOpenBrowser: true,
 5     assetsSubDirectory: 'static',
 6     assetsPublicPath: '/',
 7     proxyTable: {},
 8     // CSS Sourcemaps off by default because relative paths are "buggy"
 9     // with this option, according to the CSS-Loader README
10     // (https://github.com/webpack/css-loader#sourcemaps)
11     // In our experience, they generally work as expected,
12     // just be aware of this issue when enabling this option.
13     cssSourceMap: false
14   }

原因：

開發環境的static文件夾是基於根目錄的，所以直接用 ‘/’ 。例如這種格式：http://localhost:8080/static/img/logo.png。

大家應該都知道，webpack打包會自動把static文件夾打包進去，預設會生成一個dist文件夾作為生產環境文件的根目錄，在dist裡面才會生成static文件夾。因此生成的格式應該為http://localhost:8080/dist/static/img/logo.png。並不是基於根目錄，所以 ‘/’ 肯定是找不到對應資源的。

介紹一下這幾個屬性的含義：

assetsRoot: webpack輸出的目標文件夾路徑

assetsSubDirectory: webpack編譯輸出的二級文件夾

assetsPublicPath: webpack編譯輸出的發佈路徑，比如：www.woshichihuo.com/eat 中的 /eat就是這個路徑

 坑2. 用webpack打包後本地訪問index.html出現白屏，資源載入正常

解決方案：路由設置mode不要設置為history模式，預設還是hash。router文件夾下index.js文件中。

1 const router = new Router({
2   // mode: 'history',
3   routes: [
4     index,
5     home
6   ]
7 })

如果需要history模式，請參考vue-router官方文檔： https://router.vuejs.org/zh-cn/essentials/history-mode.html