Vue CDN打包

基于element-ui的cdn打包，网上搜到的一些教程非常坑，总是不说关键的细节。

一、3.x

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

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

image.png

index.html中body里

下面一刚加入，注意head中加入css样式cdn

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: ''
})

打包：

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/[email protected]/lib/theme-chalk/index.css"],
            js: [
                "//unpkg.com/[email protected]/dist/vue.min.js", // 访问https://unpkg.com/vue/dist/vue.min.js获取最新版本
                "//unpkg.com/[email protected]/dist/vue-router.min.js",
                "//unpkg.com/[email protected]/dist/vuex.min.js",
                "//unpkg.com/[email protected]/dist/axios.min.js",
                "//unpkg.com/[email protected]/lib/index.js"
            ]
        };

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

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

  
    
    
    
    
    
    
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.css) { %>
    
    <% } %>
  
  
    
    

    
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.js) { %>
    
    <% } %>
    
  

三、其他

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;