VUE项目部署服务器-前端开发

0.前言经过一段时间的探索，前端后端都有大致的样子了。下面就是部署到服务器，让我的博客项目公布在网上啦~~ 1.前端部署 1.1服务器准备 Nginx环境后端接口——想要完全的效果提前部署好 1.2前端打包准备终端运行...

0.前言
经过一段时间的探索，前端后端都有大致的样子了。下面就是部署到服务器，让我的博客项目公布在网上啦~~
1.前端部署
1.1服务器准备
Nginx环境
后端接口——想要完全的效果提前部署好
1.2前端打包准备
终端运行命令 npm run build
其实它就是个静态文件，在哪访问都一样
1.2.1 静态路径问题
点击index.html，通过浏览器运行，出现以下报错，如图
具体步骤如下：
1、找到配置文件

修改

2、找到配置文件

修改

3、终端运行 npm run build 即可。
此时点击index.html，通过浏览器运行便，会发现动态绑定的static的图片找不到，故static必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。
1.2.2不报错但也不显示任何页面
出现原因：
router文件夹内部的index.js的mode模式导致
hash模式会带来#，很丑，想去调#可以改成history
1.开发阶段history模式不会有#，但是打包上线后，需要后端帮忙指定项目根目录
2.hash模式可以不需要后端帮忙，只会多个#而已
如何解决：
1.注释或换成hash模式
2.使用Nginx，修改Nginx配置来映射路径
1.3修改Nginx配置

2.解决发现问题
2.1点击文章详情发现我static里的图片加载404

看路径是多了一层/show
history模式导致，把下图的./改回/；再重新部署，就是在本地直接打开会报资源找不到

2.2vue打包生成的文件的js文件过大的优化
2.2.1去掉生成map文件
打包时会生成map文件，而map文件通常都比较大，可以取消生成map文件
config/index.js找到productionSourceMap把true改成false
2.2.2代码压缩
config/index.js 找到 productionGzip 把 false 改为 true
安装插件
npm install compression-webpack-plugin --save-dev
在根目录新建文件vue.config.js

const path = require('path');

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;



module.exports = {
  publicPath: '/',
  lintOnSave: false,
  devServer: {
    open: true,      // 运行项目时，是否自动开启新窗口。
    host: '127.0.0.1',  // 手机测试端口号。//主机名字  locahost 或 127.0.0.0 或 真机测试 0.0.0.0
    port: 3000,     // 默认端口号

  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@i': path.resolve(__dirname, './src/assets'),
      }
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

      // 下面是下载的插件的配置
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100
      }),
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/', '/home', '/login', '/interviewList', '/interviewDetail'],
        renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
          renderAfterTime: 5000
        })
      })
    ]
  }
}

修改Nginx配置文件在http全局里开启gzip
配置后实测不生效，经过一翻排查，问题最终锁定在了gzip_types类型上，确保覆盖了你希望压缩的文件类型
全部Nginx配置文件内容：

user www www;
worker_processes 2; #设置值和CPU核心数一致
error_log /usr/local/webserver/nginx/logs/nginx_error.log crit; #日志位置和日志级别
pid /usr/local/webserver/nginx/nginx.pid;
#Specifies the value for maximum file descriptors that can be opened by this process.
worker_rlimit_nofile 65535;
events
{
  use epoll;
  worker_connections 65535;
}
http
{
  include mime.types;
  default_type application/octet-stream;
  log_format main  '$remote_addr - $remote_user [$time_local] "$request" '
               '$status $body_bytes_sent "$http_referer" '
               '"$http_user_agent" $http_x_forwarded_for';
  
#charset gb2312;
     
  server_names_hash_bucket_size 128;
  client_header_buffer_size 32k;
  large_client_header_buffers 4 32k;
  client_max_body_size 8m;
     
  sendfile on;
  tcp_nopush on;
  keepalive_timeout 60;
  tcp_nodelay on;
  fastcgi_connect_timeout 300;
  fastcgi_send_timeout 300;
  fastcgi_read_timeout 300;
  fastcgi_buffer_size 64k;
  fastcgi_buffers 4 64k;
  fastcgi_busy_buffers_size 128k;
  fastcgi_temp_file_write_size 128k;
  gzip on; 
  gzip_min_length 1k;
  gzip_buffers 4 16k;
  gzip_http_version 1.0;
  gzip_comp_level 2;
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  gzip_vary on;
 
  #limit_zone crawler $binary_remote_addr 10m;
 #下面是server虚拟主机的配置
 server
  {
    listen 80;#监听端口
    server_name localhost;#域名
    index index.html index.htm index.php;
    root /usr/local/webserver/nginx/html;#站点目录
      location ~ .*\.(php|php5)?$
    {
      #fastcgi_pass unix:/tmp/php-cgi.sock;
      fastcgi_pass 127.0.0.1:9000;
      fastcgi_index index.php;
      include fastcgi.conf;
    }
    location ^~ /api {
        proxy_pass   http://39.108.141.221:2716/;
        add_header Access-Control-Allow-Methods *;
        add_header Access-Control-Max-Age 3600;
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Headers $http_access_control_request_headers;
        if ($request_method = OPTIONS ) {
            return 200;
        }
    }
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
    {
      expires 30d;
      #root /static/img;
  # access_log off;
    }
    location ~ .*\.(js|css)?$
    {
      expires 15d;
   # access_log off;
    }
    access_log off;
  }

}

基础教程推荐