vue打包发布到Linux

一. vue前端项目打包
使用vscode开发项目
，在src的同级目录下创建一个vue.config.js文件（已有的话则修改相应内容），向其中写入配置信息并保存：

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static'
}

module.exports = {
 // 基本路径 baseURL已经过时
 publicPath: './', 
 // 输出文件目录
 outputDir: 'dist',
 // eslint-loader 是否在保存的时候检查
 lintOnSave: true,
 // use the full build with in-browser compiler?
 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
 // compiler: false,
 // webpack配置
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // vue-loader 配置项
 // https://vue-loader.vuejs.org/en/options.html
 // vueLoader: {},
 // 生产环境是否生成 sourceMap 文件
 productionSourceMap: true,
 // css相关配置
 css: {
  // 是否使用css分离插件 ExtractTextPlugin
  extract: true,
  // 开启 CSS source maps?
  sourceMap: false,
  // css预设器配置项
  loaderOptions: {},
  // 启用 CSS modules for all css / pre-processor files.
  modules: false
 },
 // use thread-loader for babel & TS in production build
 // enabled by default if the machine has more than 1 cores
 parallel: require('os').cpus().length > 1,
 // 是否启用dll
 // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
 // dll: false,
 // PWA 插件相关配置
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},
 // webpack-dev-server 相关配置
 devServer: {
  open: process.platform === 'darwin',
  disableHostCheck: true,
  host: 'www.test.com',//如果是真机测试，就使用这个IP
  port: 1234,
  https: false,
  hotOnly: false,
  before: app => {}
 },
 // 第三方插件配置
 pluginOptions: {
  // ...
 }
 }

在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号，因为这是在实际的部署当中所以必须要在生成环境下进行项目的部署。
如图所示：

prod.env.js
在config目录下的index.js文件当中要改assetsPublicPath: ‘./’ 否则不能正确载入静态文件

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
}

终端输入

npm run build

运行此命令行后会自动生成一个dist文件夹，这就是打包后生成的项目文件。之后将此文件夹放到服务器上，路径要与nginx配置路径一致。

dist

二. Linux服务器上安装nginx并且进行相关配置

1. 安装必要软件
   1.1 使用xshell连接终端

xshell

1.2 使用xftp传输文件

xftp

2. 安装nginx
   2.1 下载nginx
   （两个方法）
   方法一: 下载nginx，然后使用xftp传输到云服务器上
   方法二: 命令行下载

http://nginx.org/download/

wget http://nginx.org/download/nginx-1.13.6.tar.gz

2.2 解压nginx安装包
进入nginx目录

tar -zvxf nginx-1.13.6.tar.gz
cd nginx-1.13.6

2.4 make编译安装nginx

./configure --with-http_ssl_module --with-http_gzip_static_module
make
make install

2.5 启动程序

cd /usr/local/nginx/sbin/
./nginx

2.6 查看运行状态

ps aux | grep nginx

3. nginx 前端项目代理地址配置

（Vue项目设置了本地代理，部署到Nginx上需要使用反向代理解决生产环境跨域问题）
vue项目代理设置
本地代理地址配置文件 config/index.js

proxyTable: {
  '/api': {
    target: 'https://api.weixin.qq.com',   //请求地址
    changeOrigin: true, //true表示跨域
    secure: false,
    ws: true,
    logLevel: 'debug',
    pathRewrite: {
      '^/api': ''
    }
  },
  '/token': {
    target: 'http://139.9.xxx.77:8089',   //请求地址
    changeOrigin: true, //true表示跨域
    secure: false,
    ws: true,
    logLevel: 'debug',
    pathRewrite: {
      '^/token': ''
    }
  }
},

nginx代理设置

在/usr/local/nginx/conf目录下配置nginx.conf文件修改内容
（1） 修改root，（root为项目打包后文件的存放路径。）

  location / {
        root   /home/www/dist;
        index  index.html index.htm;
    }

（2）设置nginx反向代理（解决生产环境跨域问题），代理样式如下
查看反向代理详细文章了解Nginx反向代理更多信息

  location /api/ {
        proxy_pass https://api.weixin.qq.com/;
        add_header Content-Type "text/plain;charset=utf-8";
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST';
   }
   location /token/ {
        proxy_pass http://139.9.xxx.77:8089/;
        add_header Content-Type "text/plain;charset=utf-8";
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST';
   }

完整配置文件server部分如下

server {
        listen 8080;
        server_name localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        location / {
            root   /home/www/dist;
            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;
        #}
       location /api/ {
            proxy_pass https://api.weixin.qq.com/;
            add_header Content-Type "text/plain;charset=utf-8";
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST';
       }
       location /token/ {
            proxy_pass http://139.9.xxx.77:8089/;
            add_header Content-Type "text/plain;charset=utf-8";
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST';
       }
    }

4. conf配置文件的启动

在实际当中服务器中可能有多个vue前端项目，此时我们只要单独修该conf文件即可，一个前端项目对应的一个conf文件。
conf启动命令符如下：
启动项目指定配置文件

cd /usr/local/nginx/sbin/ ./nginx -c conf/nginx_hwfm.conf

查看启动进程：

ps -ef|grep nginx_hwfm

杀掉进程：

kill -9 进程号

5. nginx其它常用命令
   (1)启动nginx:

cd /usr/local/nginx/sbin/
./nginx

(2)查看运行状态

ps aux | grep nginx

(3)停止nginx

./nginx –s stop

(4)检查配置文件是否正确

./nginx –t

(5)查看nginx版本

./nginx -v

(6)配置文件位置

/usr/local/nginx/conf/nginx.conf

(7)拓展（window下nginx启动命令）

cd MyDownloads\nginx-1.15.3
start nginx
nginx -s stop
nginx -s reload