vue项目build构建的一些优化

1、路由的使用

     使用路由懒加载的方式替换原始的设置路由方式

// import Vue from 'vue'
// import Router from 'vue-router'

const homepage =   ()  => import ('@/components/homepage')
const addworks = () => import ('@/pages/addworks')
const usermanage = () => import ('@/pages/usermanage')

// Vue.use(Router)

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'homepage',
      component: homepage
    },
    {
      path: "/addworks",
      name: "addworks",
      component: addworks
    },
    {
      path: "/usermanage",
      name: "usermanage",
      component: usermanage
    }
  ]
})

//简写方式  推荐

     export default new Router({

         routes: [

                {

               path: '/',

               name: 'HelloWorld',

               component: ()=> import ('@/components/HelloWorld')

                }

                   ]

         })

 

2、插件的使用

     （1）import 按需引入

     （2）使用CDN的方式在index.html引入常用的插件

          2.1  index.html

  <script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

         2.2 在build/webpack.base.conf.js 添加如下配置

  entry: {
    app: './src/main.js'
  },
  externals: {  //通过CDN的方式在index.html引用的需要在这里设置
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

 3、资源文件加载不出

       修改config>index.js中的assetsPublicPath'/'为'./'

 

 4、build后生成map文件

       修改config>index.js中的productionSourceMap为false