1.配置vue.config.js
// 覆盖默认的webpack配置
module.exports = {
publicPath: './', //设置以相对路径作为访问方式
devServer: { // 配置服务器参数
port: 3000, //设置默认端口号
open: true //设置自动打开页面
}
}
2.配置路由懒加载
// 原来的形式:此种方式会在初始化时便将所有路由加载
import login from '../views/login.vue'
const routes = [
{
path: '/login',
name: 'login',
component: login
}
]
// 优化后的形式:此种方式会在使用到该路由的时候才会加载
const routes = [
{
path: '/login',
name: 'login',
component: ()=>import('../views/login.vue')
}
]
3.去掉打包后的console
(1)安装依赖
npm i terser-webpack-plugin -D
(2)vue.config.js文件中添加配置
// 移除打印 terser是一种比较好的方式
chainWebpack: (config) => {
config.optimization.minimizer('terser').tap((args) => {
args[0].terserOptions.compress.drop_console = true
return args
})
}
4.移出第三方包,替换为CDN资源
(1)vue.config.js文件中添加配置
// 获取当前环境
const env = process.env.NODE_ENV
if(env === 'production'){ // 表示在生产环境下,对这些包做标记,将进行处理
externals = {
// import 时的包名称 : window 全局的成员全称
vuex: 'Vuex',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
'element-ui': 'Element',
}
}
module.exports = {
// 通过该命令移出第三方包
configureWebpack: {
// 打包优化
externals
}
}
在public/index.html文件中,做如下配置
// 表示在生产环境下,导入这些CDN资源
<% if(process.env.NODE_ENV === 'production') { %>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.2/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.3/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.5/lib/index.js"></script>
<% } %>
最后 npm run build 打包即可