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系列笔记