vue打包部署（含2.0）

到這里vue的所有平時使用的知識點都寫完了

先補充一下vue2.x的安裝

## 全局腳手架
npm install vue/cli -g
## 查看版本
vue --version
## 新建項目
vue init webpack 【name】

2.x是有vue-router的，但是vuex和axios自己安裝
3.x有vue-router和vuex，axios自己安裝

vue2.x是沒有自定義的vue.config.js配置文件的，他的配置文件是config/index.js，他的proxy代理配置也在這個文件的dev對象里，默認有個proxyTable的空對象

vue2.x寫代碼放靜態文件都固定放在static文件夾里，放在別的地方找不到
vue2.x打包還有兩處需要修改的地方

// config/index.js
build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // 這里原來是assetsPublicPath: '/', 改成
    assetsPublicPath: 'dist',
    ...
}

// 如果那天我想把打包文件夾改了，改兩個地方
// assetsRoot: path.resolve(__dirname, '../xx'),
// assetsPublicPath: 'xx',

// build/utils.js 的47行
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    // 這里加上
    publicPath:'../../',
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

這樣vue2.x（查看vue-cli有3.x的配置）的配置就一樣了

打包
如果你是用webStrom開發工具，可以直接打開package.json文件，左邊的綠色箭頭直接點擊就行

dev就是vue2.x的本地開發啟動，build就是vue2.x的打包命令

serve就是vue3.x的本地開發啟動，build就是vue3.x的打包命令

只要執行了打包，等程序執行完，就會在項目的一級目錄出現一個新的文件夾，默認叫dist，修改別的打包名字，查看上面的配置

部署

因為前面已經把跨域都搞定了，現在只要找個服務器把打包的文件放進去就行，常見的，最小白的服務器有nginx，可以直接在網上下載安裝包

解壓完nginx的安裝包之后，把dist文件放在html文件夾里，然后雙擊啟動nginx.exe，然后打開瀏覽器訪問【http://localhost/dist】就可以了，可以同時部署無限個項目的，如果有購買外網雲虛擬機，去雲虛擬機上安裝一個nginx，也是放進去直接把打包文件夾放進去，然后開啟nginx服務，訪問【http://外網ip或域名/打包文件夾名字】

到這里，所有的開發都進行完了，如果想要配置二級域名，可以查看nginx分類

預編譯
路由模式必須是history，原理是把指定的幾個路由先打包出幾個頁面，但是是沒有ajax數據的

// 1、安裝prerender-spa-plugin
npm install prerender-spa-plugin --save-dev
 
// 2、webpack.prod.conf.js 
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
 
// 在 plugins 中加入
new PrerenderSPAPlugin({
      // 生成文件的路徑，也可以與webpakc打包的一致。
      // 下面這句話非常重要！！！
      // 這個目錄只能有一級，如果目錄層次大於一級，在生成的時候不會有任何錯誤提示，在預渲染的時候只會卡着不動。
      staticDir: path.join(__dirname, '../dist'),
 
      // 對應自己的路由文件，比如a有參數，就需要寫成 /a/param1。
      routes: ['/', '/first', '/second', '/third', '/fourth', '/userCenter/userFirst','/userCenter/userSecond','/userCenter/userThird'],
 
      // 這個很重要，如果沒有配置這段，也不會進行預編譯
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        headless: false,
        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。
        renderAfterDocumentEvent: 'render-event', 
        args: ['--no-sandbox', '--disable-setuid-sandbox']
      })
    })
 
// 3、在main.js中
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  // 添加mounted，不然不會執行預編譯
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

// 4.執行打包命令

Vue還有一個服務端渲染的技術，需要NodeJs的技術支持，可以查看NodeJs系列筆記