vue项目打包优化的方法实战记录_vue.js_

npm install babel-plugin-component -D

module.exports = { "presets": [ "@vue/cli-plugin-babel/preset" ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }

import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)

import './plugins/element.js'

import Vue from 'vue' import { Button, Form, FormItem, Input, Message, Header, Container, Aside, Main, Menu, Submenu, MenuItemGroup, MenuItem, Breadcrumb, BreadcrumbItem, Card, Row, Col, Table, TableColumn, Switch, Tooltip, Pagination, Dialog, MessageBox, Tag, Tree, Select, Option, Cascader, Alert, Tabs, TabPane, Steps, Step, CheckboxGroup, Checkbox, Upload, Timeline, TimelineItem } from 'element-ui' Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input) Vue.use(Header) Vue.use(Container) Vue.use(Aside) Vue.use(Main) Vue.use(Menu) Vue.use(Submenu) Vue.use(MenuItemGroup) Vue.use(MenuItem) Vue.use(Breadcrumb) Vue.use(BreadcrumbItem) Vue.use(Card) Vue.use(Row) Vue.use(Col) Vue.use(Table) Vue.use(TableColumn) Vue.use(Switch) Vue.use(Tooltip) Vue.use(Pagination) Vue.use(Dialog) Vue.use(Tag) Vue.use(Tree) Vue.use(Select) Vue.use(Option) Vue.use(Cascader) Vue.use(Alert) Vue.use(Tabs) Vue.use(TabPane) Vue.use(Steps) Vue.use(Step) Vue.use(CheckboxGroup) Vue.use(Checkbox) Vue.use(Upload) Vue.use(Timeline) Vue.use(TimelineItem) // 把弹框组件挂着到了 vue 的原型对象上，这样每一个组件都可以直接通过 this 访问 Vue.prototype.$message = Message Vue.prototype.$confirm = MessageBox.confirm

npm i babel-plugin-transform-remove-console -D

const prodPlugins = [] if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console') } module.exports = { presets: ['@vue/cli-plugin-babel/preset'], plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ], ...prodPlugins ] }

module.exports = { productionSourceMap: false }

module.exports = { productionSourceMap: false, chainWebpack: (config) => { config.when(process.env.NODE_ENV === 'production', (config) => { const cdn = { js: [ 'https://cdn.staticfile.org/vue/2.6.11/vue.min.js', 'https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js', 'https://cdn.staticfile.org/axios/0.18.0/axios.min.js', 'https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js', 'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js', 'https://cdn.staticfile.org/quill/1.3.4/quill.min.js', 'https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js' ], css: [ 'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css', 'https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css', 'https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css', 'https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css' ] } config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', echarts: 'echarts', nprogress: 'NProgress', 'nprogress/nprogress.css': 'NProgress', 'vue-quill-editor': 'VueQuillEditor', 'quill/dist/quill.core.css': 'VueQuillEditor', 'quill/dist/quill.snow.css': 'VueQuillEditor', 'quill/dist/quill.bubble.css': 'VueQuillEditor' }) config.plugin('html').tap((args) => { args[0].isProd = true args[0].cdn = cdn return args }) }) } }

<% if(htmlWebpackPlugin.options.isProd){ %><% for(var css of htmlWebpackPlugin.options.cdn.css) { %><% } %><% } %>
<% if(htmlWebpackPlugin.options.isProd){ %><% for(var js of htmlWebpackPlugin.options.cdn.js) { %><% } %><% } %>

module.exports = { chainWebpack: config => { config.when(process.env.NODE_ENV === 'production', config => { config.set('externals', { './plugins/element.js': 'ELEMENT' }) config.plugin('html').tap(args => { args[0].isProd = true return args }) }) } }

<% if(htmlWebpackPlugin.options.isProd){ %><% } %>

import Vue from 'vue' import VueRouter from 'vue-router' import Login from '../components/Login.vue' Vue.use(VueRouter) const routes = [ { path: '/', redirect: '/login' }, { path: '/login', component: Login }, { path: '/Home', component: () => import('../components/Home.vue'), redirect: '/welcome', children: [ { path: '/welcome', component: () => import('../components/Welcome.vue') }, { path: '/users', component: () => import('../components/user/Users.vue') }, { path: '/rights', component: () => import('../components/power/Rights.vue') }, { path: '/roles', component: () => import('../components/power/Roles.vue') }, { path: '/categories', component: () => import('../components/goods/Cate.vue') }, { path: '/params', component: () => import('../components/goods/Params.vue') }, { path: '/goods', component: () => import('../components/goods/List.vue') }, { path: '/goods/add', component: () => import('../components/goods/Add.vue') }, { path: '/orders', component: () => import('../components/order/Order.vue') }, { path: '/reports', component: () => import('../components/report/Report.vue') } ] } ] const router = new VueRouter({ routes }) router.beforeEach((to, from, next) => { // to 要访问的路径 // from 从哪里来的 // next() 直接放行，next('/login') 表示跳转 // 要访问 /login 的话那直接放行 if (to.path === '/login') return next() const tokenStr = window.sessionStorage.getItem('token') // token 不存在那就跳转到登录页面 if (!tokenStr) return next('/login') // 否则 token 存在那就放行 next() }) export default router

module.exports = { devServer: { proxy: { '/api': { target: 'http://127.0.0.1:8888', changeOrigin: true } } } }