vue項目打包上線流程以及遇到的問題
1.打包上線過程
1.1如何打包？
- 在項目的package.json文件中的build命令可以實現打包。
在終端執行命令npm run build,會在項目根目錄下生成一個dist文件夾
- 打開phpStudy服務，將dist文件夾放至phpStudy文件下的WWW文件夾下即可在本地訪問查看。
2.打包期間遇見問題
2.1 css,js等靜態文件路徑錯誤
- 更改配置文件。打開項目文件下config文件夾下的index.js文件，將其中的build下的assetsPublicPath: ‘/’,修改為assetsPublicPath: ‘./’,。
- 再次執行npm run build打包項目，替換之前的dist文件。
2.2 favicon圖標問題
A. 非vue框架favicon圖標問題
將制作好的favicon圖標(注意：圖標文件名必須為favicon.ico),放在公共文件目錄下。
在html頁面中引入該圖標即可。引入圖標代碼為：<link rel="icon" href="/favicon.ico" type="image/x-icon" />
B. Vue項目中favicon圖標設置：
在項目搭建成功后，將制作好的favicon文件置於src/assets/imgs/文件夾下，並命名為favicon.ico。
在build文件夾下的webpack.dev.conf.js、webpack.prod.conf.js文件中的new HtmlWebpackPlugin中
添加以下代碼：favicon: 'src/assets/imgs/favicon.ico',
修改完配置文件最好 npm run dev 一下 如果這樣小圖標還是沒有顯示，最好 清空一些緩存
2.3 圖片等靜態文件路徑問題
注意問題所在：我引入了第三方組件zTree，但是組件中的部分圖標位置引用的圖片打包之后居然不顯示。
查看問題居然是路徑問題，居然出現重復路徑
解決方案：在build文件夾下的utils.js文件中的generateLoaders方法中添加如下代碼：publicPath: '../../'
