一、3.x

在build/webpack.base.conf.js下module.exports中添加打包排除

  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'element-ui'
  },

image.png

index.html中body里<div id＝"app"></div>下面一刚加入，注意head中加入css样式cdn

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<!-- 引入组件库 用饿了吗官网提供的cdn也是比较慢的，建议自行换cdn-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

main.js中

image.png

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
import App from './App'
import router from './router'
import Router from 'vue-router'

Vue.use(Router)
// Vue.use(ElementUI);
Vue.config.productionTip = false
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

打包：

npm run build

二、4.x

先找到 vue.config.js(没有就创建-根目录下，可参考官网)，添加 externals 让webpack 不打包 vue 和 element

module.exports = {
    configureWebpack: config => {
        config.externals = {
            vue: "Vue",
            "element-ui": "ELEMENT",
            "vue-router": "VueRouter",
            vuex: "Vuex",
            axios: "axios"
        };
    },
    chainWebpack: config => {
        const cdn = {
            // 访问https://unpkg.com/element-ui/lib/theme-chalk/index.css获取最新版本
            css: ["//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css"],
            js: [
                "//unpkg.com/vue@2.6.10/dist/vue.min.js", // 访问https://unpkg.com/vue/dist/vue.min.js获取最新版本
                "//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js",
                "//unpkg.com/vuex@3.1.1/dist/vuex.min.js",
                "//unpkg.com/axios@0.19.0/dist/axios.min.js",
                "//unpkg.com/element-ui@2.10.1/lib/index.js"
            ]
        };

        // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
        config.plugin("html").tap(args => {
            // html中添加cdn
            args[0].cdn = cdn;
            return args;
        });
    }
};

然后在html中引入CDN加速即可

<!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的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
    <% } %>
  </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的JS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.js) { %>
    <script
            type="text/javascript"
            src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"
    ></script>
    <% } %>
    <!-- built files will be auto injected -->
  </body>
</html>

三、其他

npm run build 失败一般是dist文件被占用
Nginx配置

server {
    listen       80;
    server_name  lingkang.top www.lingkang.top;

    location / {
      try_files $uri $uri/ @router;
      root  /usr/local/docker/nginx/wwwroot;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Real-Port $remote_port;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      index index.html index.htm;
    }


 
location @router {
     rewrite ^.*$ /index.html last;
   }

    
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
    
}

nginx.conf开启gzip

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 4;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;