Vue+ElementUI本地化环境搭建

环境搭建

1. 安装node

下载安装
http://nodejs.cn/download/
查版本
node -v

2. 安装vue-cli3
   vue-cli3集成了大量webpack配置

安装
npm install -g @vue/cli
查版本
vue -V

3. 创建项目

cmd中,启动项目管理器 
vue ui

包管理器选择默认
预设选择手动配置（Babel、Router、Vuex、使用配置文件）
css pre-processor,添加stylus
linter 官方

4. 其他配置

如若需要，在根目录创建vue.config.js文件，用于webpack和全局的配置
只有客户端和服务端才有跨域，服务端和服务端没有

module.exports = {
  devServer: {
    port: 3333,
    open: true
  }
}

6. 启动项目

脚本在package.json查看
npm install
npm run serve

7. 插件
   devtools

ElementUI离线包下载

为了在内网使用
https://unpkg.com/browse/element-ui@2.13.2/

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.nio.charset.StandardCharsets;
import java.util.ArrayList;

public class Main {
    static String fileP = "D:\\devtools\\elementUI-2.13.2\\";
    static String urlP = "https://unpkg.com/browse/element-ui@2.13.2/";
    static String urlF = "https://unpkg.com/element-ui@2.13.2/";

    public static void main(String[] args) {
        try {
            GetPage("");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    static void GetPage(String after) throws Exception {
        System.out.println(urlP + after);
        new File(fileP + after).mkdir();
        HttpURLConnection http = (HttpURLConnection) (new URL(urlP + after)).openConnection();
        http.setRequestMethod("GET");
        http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");
        http.connect();
        if (http.getResponseCode() == 200) {
            InputStream inputStream = http.getInputStream();
            byte[] buffer = new byte[1024];
            ArrayList<byte[]> byteList = new ArrayList<>();
            ArrayList<Integer> byteLength = new ArrayList<>();
            int length;
            int totalLength = 0;
            while ((length = inputStream.read(buffer)) != -1) {
                byteList.add(buffer);
                byteLength.add(length);
                totalLength += length;
                buffer = new byte[1024];
            }
            http.disconnect();
            byte[] all;
            all = new byte[totalLength];
            totalLength = 0;
            while (byteList.size() != 0) {
                System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));
                totalLength += byteLength.get(0);
                byteList.remove(0);
                byteLength.remove(0);
            }
            String content = new String(all, StandardCharsets.UTF_8);
            all = null;
            content = content.split("tbody")[1];
            String[] us = content.split("href=\"");
            for (int i = 1; i < us.length; i++) {
                String href = us[i].split("\"", 2)[0];
                if (href.equals("../")) {
                    continue;
                }
                if (href.charAt(href.length() - 1) == '/') {
                    GetPage(after + href);
                } else {
                    GetFile(after + href);
                }
            }
        } else {
            GetPage(after);
        }
    }

    static void GetFile(String url) throws Exception {
        System.out.println(url);
        HttpURLConnection http;
        http = (HttpURLConnection) (new URL(urlF + url)).openConnection();
        http.setRequestMethod("GET");
        http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");
        http.connect();
        if (http.getResponseCode() == 200) {
            InputStream inputStream = http.getInputStream();
            byte[] buffer = new byte[1024];
            ArrayList<byte[]> byteList = new ArrayList<>();
            ArrayList<Integer> byteLength = new ArrayList<>();
            int length;
            int totalLength = 0;
            while ((length = inputStream.read(buffer)) != -1) {
                byteList.add(buffer);
                byteLength.add(length);
                totalLength += length;
                buffer = new byte[1024];
            }
            http.disconnect();
            byte[] all;
            all = new byte[totalLength];
            totalLength = 0;
            while (byteList.size() != 0) {
                System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));
                totalLength += byteLength.get(0);
                byteList.remove(0);
                byteLength.remove(0);
            }
            File f = new File(fileP + url.replaceAll("/", "\\\\"));
            f.createNewFile();
            FileOutputStream fos = new FileOutputStream(f, false);
            fos.write(all);
            fos.flush();
            fos.close();
        } else {
            GetFile(url);
        }
    }
}

ElementUI中文文档地部署

1. 拉取github上elementui的master分支
2. npm install
3. 本地运行：npm run dev
4. 打包：npm run deploy:build
5. examples/element-ui文件夹 部署到nginx

nginx配置：
windows:

server {
        listen       8200;
        server_name  localhost;

        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        location / {
            root   D:\xxx\xxx\element-ui;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

6. 本地访问白屏了，F12会看到有5个静态文件访问不到。可直接浏览器搜索href/src后的地址把静态文件保存
7. 在element-ui目录下创建common文件夹，把5个静态文件放进去
8. 打开element-ui目录下的index.html修改那5个文件的访问路径
   

https://www.cnblogs.com/weiziyu/p/12720654.html

https://segmentfault.com/a/1190000022448689?utm_source=tag-newest

本文地址：https://blog.csdn.net/wx836/article/details/111850299