sweida / vue-blog-index

laravel+vue 个人博客，项目地址：https://www.golang365.top

vue-blog v2 重构

base on vue-cli3
博客页面：http://www.golang365.top
后台页面：http://www.golang365.top/manage.html#/login

1.多页面配置，博客页面和后台页面分离
2.图片上传又拍云
3.博客页面用 iview UI
4.后台页面用 element UI

vue-cli3

安装依赖

npm install

启动项目

npm run serve

打包

npm run build

打包并提交代码到分支 gh-pages，服务器就可以直接拉取 gh-pages 的代码

# 打包提交到sit分支
npm run deploy:sit
# 打包提交到prod分支
npm run deploy

环境变量

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

process.env.VUE_APP_VERSION
以 VUE_APP_ 开头

vue.config.js开发环境文件配置

这是多页面配置，2 个入口，index.html指向/路由，manage.html指向manage.html#/路由

  pages: {
    index: {
      // 应用入口配置，相当于单页面应用的main.js，必需项
      entry: 'src/modules/index/main.js',
      // 应用的模版，相当于单页面应用的public/index.html，可选项，省略时默认与模块名一致
      template: 'public/index.html',
      // 编译后在dist目录的输出文件名，可选项，省略时默认与模块名一致
      filename: 'index.html',
      // 标题，可选项，一般情况不使用，通常是在路由切换时设置title
      // 需要注意的是使用title属性template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'index page',
      // 包含的模块，可选项
      // chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    manage: {
      entry: 'src/modules/manage/main.js',
      template: 'public/manage.html',
      filename: 'manage.html',
      title: 'manage page',
      // chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  },

配置 api 请求地址和 serve 启动端口号

  devServer: {
    port: 9000, // 端口号
    host: "0.0.0.0",
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    proxy: {
      "/apis": {
        target: "http://127.0.0.1:8080/api/v2", // 需要请求的地址
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          "^/apis": "" // 替换target中的请求地址，也就是说，在请求的时候，url用'/proxy'代替'
        }
      }
      // '/foo': {
      //     target: '<other_url>'
      // }
      // 配置多个代理
    }

生产环境 api 接口映射

解决方法：修改宝塔里 vue 项目的 nginx 配置文件

server
{
    ...
    // 添加下面三行
    location /api {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://api.golang365.top/api/v2;
    }
    ...
}

修改服务器 nginx 配置文件，开启 gzip

server
{
    listen 80;

    // 添加下面
    gzip on;

    # 不压缩临界值，大于1K的才压缩，一般不用改
    gzip_min_length 1k;


    gzip_buffers 4 16k;

    # 压缩级别，1-10，数字越大压缩的越好，时间也越长，看心情随便改吧
    gzip_comp_level 9;

    # 进行压缩的文件类型，缺啥补啥就行了，JavaScript有两种写法，最好都写上吧，总有人抱怨js文件没有压缩，其实多写一种格式就行了
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

    # 跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"，我不需要这玩意，自己对照情况看着办吧
    gzip_vary off;

    # IE6对Gzip不怎么友好，不给它Gzip了
    gzip_disable "MSIE [1-6]\.";

    ...
}

自己写的自动打包提交编译文件到 gh-pages

新建gh-pages目录
gh-pages目录创建gh-pages分支的git，并把gh-pages添加到.gitignore文件

gh-pages.sh文件

开启权限才能运行sh文件
chmod 777 gh-pages.sh

运行文件
./gh-pages.sh

将自动打包文件，把打包后的文件复制到gh-pages文件，并提交gh-pages文件到gh-pages分支

未解决问题

• 目前已经是配置多页面，但是打包后 js 还是合并在一起，有没有大佬知道怎么解决多页面 js 分开打包

vue-cli3启动报错问题

找到/node_modules/sockjs-client/dist/sockjs.js
2.找到代码的 1605行

try {
  //  self.xhr.send(payload); 把这里注掉
} catch (e) {
  self.emit('finish', 0, '');
  self._cleanup(false);
}