xing/vue-learn
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

线上环境打包优化，使用cdn分散打包js文件的体积

Browse Source
This commit is contained in:
xing 2020-07-02 10:37:43 +08:00
parent 2f5b951911
commit 2a35a5d994
4 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/index.html
View File

@ -5,6 +5,21 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link href="https://cdn.staticfile.org/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/quill/1.3.7/quill.core.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/quill/1.3.7/quill.snow.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/quill/1.3.7/quill.bubble.min.css" rel="stylesheet">
<!-- Theme included stylesheets -->
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.13.2/index.js"></script>
<script src="https://cdn.staticfile.org/quill/1.3.7/quill.min.js"></script>
<script src="vue-quill-editor.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>

1
public/vue-quill-editor.js Normal file
View File

@ -0,0 +1 @@
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("quill")):"function"==typeof define&&define.amd?define(["quill"],e):"object"==typeof exports?exports.VueQuillEditor=e(require("quill")):t.VueQuillEditor=e(t.Quill)}(this,function(t){return function(t){function e(i){if(n[i])return n[i].exports;var l=n[i]={i:i,l:!1,exports:{}};return t[i].call(l.exports,l,l.exports,e),l.l=!0,l.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=2)}([function(e,n){e.exports=t},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(4),l=n.n(i),o=n(6),r=n(5),u=r(l.a,o.a,!1,null,null,null);e.default=u.exports},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.install=e.quillEditor=e.Quill=void 0;var l=n(0),o=i(l),r=n(1),u=i(r),s=window.Quill||o.default,a=function(t,e){e&&(u.default.props.globalOptions.default=function(){return e}),t.component(u.default.name,u.default)},c={Quill:s,quillEditor:u.default,install:a};e.default=c,e.Quill=s,e.quillEditor=u.default,e.install=a},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={theme:"snow",boundary:document.body,modules:{toolbar:[["bold","italic","underline","strike"],["blockquote","code-block"],[{header:1},{header:2}],[{list:"ordered"},{list:"bullet"}],[{script:"sub"},{script:"super"}],[{indent:"-1"},{indent:"+1"}],[{direction:"rtl"}],[{size:["small",!1,"large","huge"]}],[{header:[1,2,3,4,5,6,!1]}],[{color:[]},{background:[]}],[{font:[]}],[{align:[]}],["clean"],["link","image","video"]]},placeholder:"Insert text here ...",readOnly:!1}},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var l=n(0),o=i(l),r=n(3),u=i(r),s=window.Quill||o.default;"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function(t,e){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var n=Object(t),i=1;i<arguments.length;i++){var l=arguments[i];if(null!=l)for(var o in l)Object.prototype.hasOwnProperty.call(l,o)&&(n[o]=l[o])}return n},writable:!0,configurable:!0}),e.default={name:"quill-editor",data:function(){return{_options:{},_content:"",defaultOptions:u.default}},props:{content:String,value:String,disabled:{type:Boolean,default:!1},options:{type:Object,required:!1,default:function(){return{}}},globalOptions:{type:Object,required:!1,default:function(){return{}}}},mounted:function(){this.initialize()},beforeDestroy:function(){this.quill=null,delete this.quill},methods:{initialize:function(){var t=this;this.$el&&(this._options=Object.assign({},this.defaultOptions,this.globalOptions,this.options),this.quill=new s(this.$refs.editor,this._options),this.quill.enable(!1),(this.value||this.content)&&this.quill.pasteHTML(this.value||this.content),this.disabled||this.quill.enable(!0),this.quill.on("selection-change",function(e){e?t.$emit("focus",t.quill):t.$emit("blur",t.quill)}),this.quill.on("text-change",function(e,n,i){var l=t.$refs.editor.children[0].innerHTML,o=t.quill,r=t.quill.getText();"<p><br></p>"===l&&(l=""),t._content=l,t.$emit("input",t._content),t.$emit("change",{html:l,text:r,quill:o})}),this.$emit("ready",this.quill))}},watch:{content:function(t,e){this.quill&&(t&&t!==this._content?(this._content=t,this.quill.pasteHTML(t)):t||this.quill.setText(""))},value:function(t,e){this.quill&&(t&&t!==this._content?(this._content=t,this.quill.pasteHTML(t)):t||this.quill.setText(""))},disabled:function(t,e){this.quill&&this.quill.enable(!t)}}}},function(t,e){t.exports=function(t,e,n,i,l,o){var r,u=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(r=t,u=t.default);var a="function"==typeof u?u.options:u;e&&(a.render=e.render,a.staticRenderFns=e.staticRenderFns,a._compiled=!0),n&&(a.functional=!0),l&&(a._scopeId=l);var c;if(o?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},a._ssrRegister=c):i&&(c=i),c){var d=a.functional,f=d?a.render:a.beforeCreate;d?(a._injectStyles=c,a.render=function(t,e){return c.call(e),f(t,e)}):a.beforeCreate=f?[].concat(f,c):[c]}return{esModule:r,exports:u,options:a}}},function(t,e,n){"use strict";var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"quill-editor"},[t._t("toolbar"),t._v(" "),n("div",{ref:"editor"})],2)},l=[],o={render:i,staticRenderFns:l};e.a=o}])});

17
src/main-prod.js
View File

@ -1,17 +1,16 @@
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router/router' import router from './router/router'
import ElementUI from 'element-ui' // import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // import 'element-ui/lib/theme-chalk/index.css'
import './assets/fonts/iconfont.css' import './assets/fonts/iconfont.css'
import './assets/css/globel.css' import './assets/css/globel.css'
import tableTree from 'vue-table-with-tree-grid' import tableTree from 'vue-table-with-tree-grid'
import axios from 'axios' import axios from 'axios'
import vueQuillEditor from 'vue-quill-editor' import VueQuillEditor from 'vue-quill-editor'
// import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.core.css' // import styles // import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.snow.css' // for snow theme // import 'quill/dist/quill.bubble.css' // for bubble theme
import 'quill/dist/quill.bubble.css' // for bubble theme
import timeline from 'element-ui/lib/timeline' import timeline from 'element-ui/lib/timeline'
import timelineItem from 'element-ui/lib/timeline-item' import timelineItem from 'element-ui/lib/timeline-item'
// 进度条 // 进度条
@ -20,7 +19,7 @@ import 'nprogress/nprogress.css'
Vue.use(timeline) Vue.use(timeline)
Vue.use(timelineItem) Vue.use(timelineItem)
Vue.use(vueQuillEditor) Vue.use(VueQuillEditor)
Vue.component('table-tree', tableTree) Vue.component('table-tree', tableTree)
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 为每个ajax请求头挂一个 token 并加载进度条 // 为每个ajax请求头挂一个 token 并加载进度条
@ -46,7 +45,7 @@ Vue.filter('dataFormat', (time) => {
}) })
Vue.prototype.$http = axios Vue.prototype.$http = axios
Vue.use(ElementUI) // Vue.use(Element)
Vue.config.productionTip = false Vue.config.productionTip = false

15
vue.config.js
View File

@ -3,10 +3,25 @@ module.exports = {
port: 8887, port: 8887,
open: true open: true
}, },
// webpack 设置 详见 https://cli.vuejs.org/zh/guide/webpack.html vue的webpack设置
chainWebpack: config => { chainWebpack: config => {
// 设置线上环境（打包）的main.js
config.when(process.env.NODE_ENV === 'production', config => { config.when(process.env.NODE_ENV === 'production', config => {
config.entry('app').clear().add('./src/main-prod.js') config.entry('app').clear().add('./src/main-prod.js')
// 使用如下对象时，先去window对象中查找，也就是不node_modules中打包，但需要在public/index.html中自行引入外部资源
config.set('externals', {
vue: 'Vue',
'element-ui': 'Element',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
}) })
})
// 设置开发环境的main.js
config.when(process.env.NODE_ENV === 'development', config => { config.when(process.env.NODE_ENV === 'development', config => {
config.entry('add').clear().add('./src/main-dev.js') config.entry('add').clear().add('./src/main-dev.js')
}) })