pc端打包

1.在根目录下创建vue.config.js

  在vue.config.js中进行需要的配置

  修改静态资源路径，不修改则会出现白屏的情况

module.exports = {
    publicPath:"./",
}

  2.在package.json中的scripts下将build修改成

"build":"vue-cli-service build --report"

在服务器环境运行dist通过在vscode中下载插件(Live Server)，找到dist文件夹下面的index.html看运行效果!

3.进度条

    (1).下载nprogress     npm i --save nprogress

    (2).在main.js中导入 

​
import Nprogress from 'nprogress'//js
import 'nprogress/nprogress.css'//css
 
​

下载完成后在封装axios请求的js文件中进行开启和关闭

import axios from 'axios'
//根据环境不同引入不同api地址
import { baseUrl } from '@/config'
// 进度条
import Nprogress from 'nprogress'
import store from '@/store'
// 设置axios/baseUrl的超时时间
let service = axios.create({
    baseURL: baseUrl, // url = base api url + request url
    timeout: 60000 // request timeout
})
// 请求拦截（设置请求头）
service.interceptors.request.use(config => {
    Nprogress.start() //开启进度条
    if (store.state.token) {
        config.headers['Authorization'] =  store.state.token
    }
    return config
}, error => {
    console.log(error)
    return Promise.reject(error)
})
// 响应拦截器（设置登录超时）
service.interceptors.response.use(res => {
    Nprogress.done()  //响应完成后关闭
    return Promise.resolve(res || 'error')
}, error => {
    console.log('err' + error)
    return Promise.reject(error)
})
export default service

4.去除生产环境SouceMap (这个js文件是占很大空间)

 productionSourceMap: false,  //2.去除生产环境的productionSourceMap

5.去除注释

安装 babel-plugin-transform-remove-console --save-dev

安装完成后会自动生成babel.config.js

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  
  "plugins": [
    ...productPlugins
  ]
}

6.将main.js进行拆分

把main.js拆分成 main-prod.js 和 main-dev.js 里面分别复制一份

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 
// 树状表格
import ZkTable from 'vue-table-with-tree-grid'
 
// 段点隐藏
import 'element-ui/lib/theme-chalk/display.css';
// element.js
import '@/plugins/element.js'
// 移动端适配
import 'lib-flexible/flexible';
// 阿里图标
import './assets/fonts/iconfont.css'
 
//2.main中  echarts
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts
 
import axios from "axios"
Vue.config.productionTip = false
 
Vue.prototype.$axios = axios
 
//过滤时间
Vue.filter("Format",(val)=>{
   let date=new Date(val)
   let y =date.getFullYear()
   let m =(date.getMonth()+1+'').padStart(2,'0')
   let d =(date.getDate()+'').padStart(2,'0')  
   let h = (date.getHours()+'').padStart(2,'0')
   let f = (date.getMinutes()+'').padStart(2,'0')
   let s= (date.getSeconds()+'').padStart(2,'0')
  return `${y}-${m}-${d} ${h}:${f}:${s}`
})
 
Vue.component('zk-table', ZkTable)
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

然后再vue.config.js中的chainWebpack进行配置

chainWebpack: config => {
        //发布模式
        config.when(process.env.NODE_ENV === 'production', config => {
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
 
            //使用externals设置排除项
            config.set('externals', {
                vue: 'Vue',
                'vue-router': 'VueRouter',
                'element-ui': 'ElementUI',
                axios: 'axios',
                lodash: '_',
                echarts: 'echarts',
                nprogress: 'NProgress',
                'vue-quill-editor': 'VueQuillEditor'
            })
 
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }

7.使用CDN加载外部样式

 首先在chainWebpack中的发布模式中设置排除项 和 动态处理router

​
 chainWebpack:config=>{// 3. 自定义打包入口  
    //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
 
 
              // 2.使用externals设置排除项  （2.加载外部CDN）
              config.set('externals',{
                vue:'Vue',
                'vue-router':'VueRouter',
                axios:'axios',
                lodash:'_',
                echarts:'echarts',
                nprogress:'NProgress',
                'vue-quill-editor':'VueQuillEditor'
            })
 
        //## 处理$router.  发布模式引入cdn资源
        config.plugin('html').tap(args => {
            args[0].isProd = true
            return args
        })
 
       })
 
   //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
 
       //## 处理$router  开发模式不引入cdn资源
        config.plugin('html').tap(args => {
            args[0].isProd = false
            return args
        })
 
        })
    }
 
​

其次，去main-prod.js中注释 进度条、element-ui的css包

// import 'element-ui/lib/theme-chalk/display.css';
//import 'nprogress/nprogress.css'

在public夹文件中的index.html的<head></head>头部中引入

    <script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
      <!-- nprogress 的样式表文件 -->
      <!-- nprogress 的样式表文件 -->
      <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
      <!-- 富文本编辑器 的样式表文件 -->
      <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
      <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
      <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
      <!-- element-ui 的样式表文件 -->
      <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.2/theme-chalk/index.css" />
      
      <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> -->
 
      <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
      <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
      <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
      <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
      <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
      <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
      <!-- 富文本编辑器的 js 文件 -->
      <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
      <!-- element-ui 的 js 文件 -->
      <script src="https://cdn.staticfile.org/element-ui/2.15.2/index.js"></script>

 打包下来的main-prod.js文件中的完整代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 
 
//环境配置
import { baseUrl } from '@/config/index.js'
console.log(baseUrl);
 
//导入axios
// import axios from '@/utils/service.js'
// Vue.prototype.$axios = axios; // 把axios挂载到Vue的原型上，这样的话项目中任何一个组件都可以使用了
 
// 移动端适配
import 'lib-flexible/flexible';
 
//引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts=echarts
 
//引入font
import '../src/assets/fonts/iconfont.css'
 
//引入
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);
 
//引入 tree-table
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
 
 
//过滤器
Vue.filter('dataFormat', function (originVal) {
    const dt = new Date(originVal)
 
    const y = dt.getFullYear()
    const m = (dt.getMonth() + 1 + '').padStart(2, '0')
    const d = (dt.getDate() + '').padStart(2, '0')
 
    const hh = (dt.getHours() + '').padStart(2, '0')
    const mm = (dt.getMinutes() + '').padStart(2, '0')
    const ss = (dt.getSeconds() + '').padStart(2, '0')
    // yyyy-mm-dd hh:mm:ss
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
 
Vue.config.productionTip = false
 
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

8.实现首页优化

在public/index.html中设置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
 
    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    ........
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
    <% } %>
  </head>
  .......

在vue.config.js中

module.exports = {
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            ......
            
            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = true
                return args
            })
        })
 
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
 
            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = false
                return args
            })
        })
    }
}