常用合集

hot-reload：熱加載。不需要刷新瀏覽器自動看到變化。
查看htmlwebpackplugin配置

main.js

• 全局引用style，import

好處

1. 圖片直接打包進js，沒有請求？具體再研究

發(fā)布打包網(wǎng)站

npm run build

打包后的文件詳解

app.xxxxx(hash).js 自己寫的 hash是自己根據(jù)內(nèi)容計算。
查看文件大小，如果過大可以使用vue-cli中的 report可以可視化查看。
在package.json中， "report": "vue-cli-service build --report"，然后npm run report，生成的dist中的report.html。

• 例子
  在我學(xué)習(xí)慕課網(wǎng)的餓了么app時，使用了moment組件，占用了很大的體積，是因為它會動態(tài)引用各國語言js。這里借用webpack的ContextReplacementPlugin。
  步驟：

1. 使用Vue-CLI 的 chainWebpack的plugin進行修改
2. require webpack以后

config.plugin('context')
      .use(webpack.ContextReplacementPlugin,
        [/moment[/\\]locale$/, /zh-cn/])

3. 查閱是否成功
   vue inspect >>xxx.js

4. 在dist文件夾下生成了build之后的文件，可以在該文件夾中啟動http-server（需要先安裝npm install http-server -g）

發(fā)布方式

1. 本地push
2. 服務(wù)器pull
3. 服務(wù)器build

確保資源路徑正確

1. baseURL保證base路徑+相對路徑
2. 查看Network中靜態(tài)資源路徑、接口