Vue-cli项目收尾工作

一、删除地图

路劲：项目/config/index.js

productionSourceMap: true  // 将它改成false

二、删除Vue.js

可以通过引入CDN的路劲来导入(可有可无)

三、路由懒加载

由于打包的时候会把所有组件代码放入一个js文件中,这个js文件会十分大,所以就用路由懒加载把这些组件按路由分开,实现懒加载
1.安装

npm install --save-dev @babel/plugin-syntax-dynamic-import

2.配置
在.Babelrc文件里的plugins添加
{
“plugins”: ["@babel/plugin-syntax-dynamic-import"]
}

3.使用
```javascript
import Store from './Store'  // 开发时候的导入
const Store = () => import('./Store')  // 路由组件懒加载

这个方法有坑，直接看其他方法：

//源码
import HelloWorld from '@/components/HelloWorld'
export default new Router({
                  routes: [
                    {
                      path: '/',
                      name: 'HelloWorld',
                      component:HelloWorld
                    }
                  ]
                })
// 方法一
// 去掉import,直接写下面这个
component: resolve=>(require(["@/components/HelloWorld"],resolve))  // 路由懒加载
Vue.component('newarticle', resolve=>(require(['@/components/Public/NewArticle'],resolve))) // 组件懒加载
// 方法二
component:()=>import("@/components/HelloWorld") 

具体可参考官方：路由懒加载

四、打包

npm run build

五、安装http-server

在有index.html的文件夹中打开

npm i -g http-server  // 安装
hs -o -p 8888        //  使用

六、预渲染

作用：由于组件的使用,页面只有组件名而没有内容,很不利于SEO,所以要进行预渲染+服务器渲染

1.路由设置

mode: 'history',

2.下载组件

npm install prerender-spa-plugin --save

3.配置
由于是项目上线前的优化,所以可以不用配置webpack.dev.conf.js

// build下的webpack.prod.conf.js

// 设置在头部
const PrerenderSPAPlugin = require('prerender-spa-plugin')   
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

plugins: [
new PrerenderSPAPlugin({
      // 生成文件的路径，也可以与webpakc打包的一致。
      staticDir: path.join(__dirname, '../dist'),
      
      // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1
      routes: ['/', '/report','/genius','/index/param1'],
      // 一定要写，如果没有配置这段，也不会进行预编译
      renderer: new Renderer({
          inject: {
            foo: 'bar'  // 这个不用管
          },
          headless: false,
          // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
          renderAfterDocumentEvent: 'render-event'
      })
    })
]

4.使用

// 在mian.js下的主组件中添加渲染后执行事件
new Vue({
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})