默认打包入口文件是src/main.js
项目根目录创建vue.config.js,这是webpack的配置文件
module.exports = { chainWebpack : config => { //开发模式 config.when(process.env.NODE_ENV === 'development', config => { //自定义打包入口 config.entry('app').clear().add('./src/main-dev.js') }) //发布模式 config.when(process.env.NODE_ENV === 'production', config => { //自定义打包入口 config.entry('app').clear().add('./src/main-prod.js') }) } }依赖项在打包时会全部放在chunk-vendors.js文件中,通过cdn引入依赖项可以减小该文件体积,从而加快首页加载速度
修改vue.config.js module.exports = { chainWebpack : config => { //开发模式 config.when(process.env.NODE_ENV === 'development', config => { //自定义打包入口 config.entry('app').clear().add('./src/main-dev.js') }) //发布模式 config.when(process.env.NODE_ENV === 'production', config => { //修改默认main.js文件位置 config.entry('app').clear().add('./src/main-prod.js') //通过cdn引入资源,优化chunk-vendors.js大小 config.set('externals', { 'vue': 'Vue',//key是文件的名字,value是文件的包名(在cdn文件中有展示) 'vue-router' : 'VueRouter', 'element-ui' : 'ELEMENT' }) }) } } 修改src/main-prod.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' //element-ui已通过cdn引入,这里无需再次引入 // import './plugins/element.js' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app') 修改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.title %></title> <!-- 引入cdn资源,减小chunk-vendors.js文件的大小 --> <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.4.5/theme-chalk/index.css" rel="stylesheet"> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> <!-- 引入cdn资源,减小chunk-vendors.js文件的大小 --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </body> </html>引入cdn后,无需注释router和vuex中的use语句.
在开发模式和生产模式下,项目的入口文件都是index.html,会导致加载一些不必要的资源,我们可以在webpack配置中定义一个变量,以表示当前环境,从而可以在idex.html中加载不同的资源
修改vue.config.js module.exports = { chainWebpack : config => { //开发模式 config.when(process.env.NODE_ENV === 'development', config => { //自定义打包入口 config.entry('app').clear().add('./src/main-dev.js') //定义变量,标识开发模式与发布模式 config.plugin('html').tap(args => { args[0].isProd = false return args; }) }) //发布模式 config.when(process.env.NODE_ENV === 'production', config => { //自定义打包入口 config.entry('app').clear().add('./src/main-prod.js') //定义变量,标识开发模式与发布模式 config.plugin('html').tap(args => { args[0].isProd = true return args; }) }) } } 修改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.title %></title> <!-- 引入cdn资源,减小chunk-vendors.js文件的大小 --> <!-- 只有生产模式需要引入cdn资源 --> <% if(htmlWebpackPlugin.options.isProd){ %> <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.4.5/theme-chalk/index.css" rel="stylesheet"> <% } %> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> <!-- 引入cdn资源,减小chunk-vendors.js文件的大小 --> <!-- 只有生产模式需要引入cdn资源 --> <% if(htmlWebpackPlugin.options.isProd){ %> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <% } %> </body> </html>