最近在做一個vue項目，後臺還沒有開始，只是根據提供的原型ui把前臺靜態頁面設計出來，也是本人第一次做，開始做的時候用的是cli-4.x版本，給我的感覺，簡化了很多，目錄結構很簡潔。然而在打包準備上線測試的時候遇到了很多問題，以此記錄下來，希望我的文章能夠幫到有需要的童鞋。大神輕噴。
一、初始打包
命令npm run build
- 默認編譯後直接在根目錄生成dist文件夾
在沒有編寫vue.config.js的情況下，生成的目錄結構如下
可以看到靜態文件直接位於dist文件夾下，這與我項目中的靜態資源路徑不一致（我的是放在assets下），所以我們需要編寫vue.config.js
二、vue.config.js配置
- 官方cli配置詳解：配置參考
- 開發的時候，我只在裏面添加了別名（目前項目用的還不多，後邊避免靜態資源路徑出錯，乾脆去掉了
- 如果覺得官方配置看的麻煩，我給大家推薦一篇別的博主寫的，可以按需引入vue.config.js詳細配置註釋
- 我的vue.config.js
module.exports = {
// 公共路徑(必須有的)
publicPath: "./",
// 輸出文件目錄
outputDir: "dist",
// 靜態資源存放的文件夾(相對於ouputDir)
assetsDir: "assets",
// eslint-loader 是否在保存的時候檢查(果斷不用，這玩意兒我都沒裝)
lintOnSave:false,
// 我用的only，打包後小些
compiler: false,
productionSourceMap: true, // 不需要生產環境的設置false可以減小dist文件大小，加速構建
// css相關配置(我暫時沒用到)
// css: {
// 是否使用css分離插件 ExtractTextPlugin
// extract: true,
// 開啓 CSS source maps?
// sourceMap: false,
// css預設器配置項
// loaderOptions: {},
// 啓用 CSS modules for all css / pre-processor files.
// modules: false
// },
// webpack-dev-server 相關配置
devServer: {
open: true, // npm run serve後自動打開頁面
host: '0.0.0.0', // 匹配本機IP地址(默認是0.0.0.0)
port: 8080, // 開發服務器運行端口號
proxy: null,
// 注：目前本項目暫時沒有寫後臺接口，沒有跨域問題，暫時不配置proxy
},
}
// 差不多就這些的，其餘的大家可以查看官方文檔，鏈接上邊給出了
- 除了以上這些，我們最好還要將router下的index.js中的mode設置成hash，不要設置成history
三、再次打包
配置完，直接執行npm run build
我們看到這次的dist目錄
我們也看到了我的靜態資源存放在assets裏面
我們打開index.html並訪問就能在瀏覽器訪問到自己項目的頁面了
後邊有阿里雲服務器用nginx部署該項目的過程