By

前言

Github：https://github.com/HealerJean

博客：http://blog.healerjean.com

关于这两中部署的方式，在签名一章节有了不同的和后端搭配的策略，下面主要是针对这两种前端环境的部署

1、部署到Linux服务器

1.1、部署到Linux服务器首先需要给它分配一个路径

这里放置前端项目的文件

 /usr/local/VueWebProject/

[root@duodainyouhui ~]# cd /usr/local/VueWebProject/
[root@duodainyouhui VueWebProject]# pwd
/usr/local/VueWebProject
[root@duodainyouhui VueWebProject]# ll
total 16
-rw-r--r-- 1 root root 4286 Aug  7 10:25 favicon.ico
-rw-r--r-- 1 root root  815 Aug  7 10:25 index.html
drwxr-xr-x 6 root root 4096 Jul  3 13:08 static
[root@duodainyouhui VueWebProject]#

WX20180817-135602@2x

1.2、前端项目打包和上传

笔者是后端开发人员，这里只需要知道怎么上传就可以了

上传命令

gulp develop

gulp master

gulpfile.js


'use strict';
var gulp = require('gulp');
var shell = require('gulp-shell');
var oss = require('gulp-alioss-dd');


gulp.task('build_master', shell.task([
  'npm run build_online'
]))



gulp.task('develop', ['build_master'] ,shell.task([
  // 'scp -r dist/* root@101.200.139.1:/data/www/static'
  'scp -r dist/* root@47.0.0.38:/usr/local/VueWebProject'
]))

gulp.task('master', ['build_master'] ,shell.task([
  // 'scp -r dist/* root@101.200.139.1:/data/www/static'
  'scp -r dist/* root@47.0.0.28:/usr/local/VueWebProject'
]))

1.3、路径问题

这个时候，一股脑上传了，我们需要保证index.html中调用staitc的路径是正确的，关于我自己的项目中使用的是相对露露姐

index.html中

  assetsPublicPath: '/',

build: {
  // Template for index.html
  index:path.resolve(__dirname, '../dist/index.html'),
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',

1.4、nginx 分配域名


  server {
        listen       80;
        server_name  quan.healerjean.cn;

        root        /usr/local/VueWebProject/;
        index      index.html,index.htm;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

     
        location / {
            try_files $uri /index.html;
        }
    }

2、OSS服务器上传

2.1、前端项目打包和上传

'use strict';
var gulp = require('gulp');
var shell = require('gulp-shell');
var oss = require('gulp-alioss-dd');
// var buildEnv = require('./config/prod.env')
const OSS_FILE_PATH = 'healerjean-admin' //上传的目录

// 测试环境OSS
var devOptions = {
        accessKeyId: 'mBXlTfasdfadsfa',
        secretAccessKey: 'mBXlTfasdfqqqqqqqadsfa',
        endpoint: 'http://oss-cn-nanjing.aliyuncs.com',
        apiVersion: '2013-10-15',
        prefix: OSS_FILE_PATH, //上传的目录
        bucket: 'test'
};
// // 正式环境OSS
var masterOptions = {
        accessKeyId: 'Rh8Ro20uqweqweqw3WtN',
        secretAccessKey: 'LnddVRLCbEmBXlTfasdfqqqqqqqad1',
        endpoint: 'http://oss-cn-shanghai.aliyuncs.com',
        apiVersion: '2013-10-15',
        prefix: OSS_FILE_PATH, //上传的目录
        bucket: 'prod'
};

gulp.task('build_develop', shell.task([
  'npm run build -develop'
]))

// build生成文件到dist目录
gulp.task('build_master', shell.task([
//   'rm -fr ./dist/*',
  'npm run build_online'
]))

//手动上传到测试环境,['build_develop']
gulp.task('develop',['build_develop'],  function(){
    console.log('手动部署:将上传到测试环境的OSS '+OSS_FILE_PATH+' 文件夹中')
    return gulp.src(['./dist/**']).pipe(oss(devOptions));
});

// 手动上传到正式环境
gulp.task('master',['build_master'], function(){
    console.log('手动部署:将上传到正式环境的OSS '+OSS_FILE_PATH+' 文件夹中')
    return gulp.src(['./dist/**']).pipe(oss(masterOptions));
});

2.2、路径问题

index.js

  assetsPublicPath:PathUrl,

const OSS_FILE_PATH = 'healerjean-admin' //上传的目录
const OSS_URL_MASTER = '//testquan.dangqugame.cn/' // 正式OSSURL
const OSS_URL_DEVELOP = '//admore.oss-cn-shanghai.aliyuncs.com/' // 测试OSSURL

let PathUrl=''
if(process.env.NODE_ENV==="production"){
   PathUrl = OSS_URL_MASTER + OSS_FILE_PATH +'/'
}else{
   PathUrl = OSS_URL_DEVELOP + OSS_FILE_PATH +'/'
}


………………………………


build: {
  // Template for index.html
  index:path.resolve(__dirname, '../dist/index.html'),
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath:PathUrl,

2.3、通过OSS类似图片地址访问index.html即可

ContactAuthor