vue项目上线优化包

最新推荐文章于 2025-07-23 20:48:38 发布

旧友前度丶

最新推荐文章于 2025-07-23 20:48:38 发布

阅读量239

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js webpack javascript

本文链接：https://blog.youkuaiyun.com/wangyangzxc123/article/details/121257600

第一步.

找到vue.config.js..在里面修改代码

/*
1.确定开发环境
2.上线环境== 有些包不需要打包.直接使用线上的cdn
3.配置她
*/
// 获取当前的打包环境
const env = process.env.NODE_ENV
let externals = {}
if (env === 'production') {
//下面是自己所用的包..
//前面是包名
//后面是自己对应取得包名
  externals = {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    dayjs: 'dayjs',
    echarts: 'echarts',
    'element-ui': 'ElementUI',
    'vue-quill-editor': 'VueQuillEditor'
  }
}

// 覆盖默认的webpack配置
module.exports = {
  publicPath: './',
  devServer: {
    port: 8888,
    open: true
  },
  // 增强 vue-cli 的 webpack 配置项
  configureWebpack: {
    // 打包优化
    externals
  }
}

第二部.找到public下面得html文件.

导入第三方CDN资源

<!DOCTYPE html>
<html lang="">
  <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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.core.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.bubble.css">
  </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>
     <!-- 如果是开发环境 不要加载这些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/dayjs@1.10.6/dayjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.5/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
    <% } %>
    <!-- built files will be auto injected -->
  </body>
</html>

第三步.

yarn build`生成dist目录