项目打包上线部署

最新推荐文章于 2023-09-22 17:12:36 发布

爱蹦哒的咸鱼

最新推荐文章于 2023-09-22 17:12:36 发布

阅读量324

点赞数 2

文章标签： vue.js javascript 前端 webpack html Powered by 金山文档

本文链接：https://blog.csdn.net/m0_68393821/article/details/129267997

版权

打包

路由模式

将hash模式改成history模式，只需要将路由的mode类型改成history即可

找到router里的index.js文件，将代码1改称代码2样式
代码1：
const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),// 管理滚动行为 如果出现滚动 切换就让 让页面回到顶部
  routes: constantRoutes// 改成只有静态路由
})
代码2：
假设我们的地址是这样的  www.xxxx/com/kb/a
我们会发现，其实域名是www.xxxx/com，kb是特定的前缀地址，此时我们可以配置一个base属性，配置为kb
    const createRouter = () => new Router({
      mode: 'history', // require service support
      base: '/hr/', // 配置项目的基础地址
      scrollBehavior: () => ({ y: 0 }), // 管理滚动行为 如果出现滚动 切换就让 让页面回到顶部
      routes: [...constantRoutes] // 改成只有静态路由
    })
此时，我们会发现地址已经变成我们想要的样子：http://localhost:8080/kb/dashboard

性能分析和CDN的应用

a.性能分析

执行命令：npm run preview -- --report

这个命令会从我们的入口main.js进行依赖分析，分析出最大的包，方便我们进行观察和优化

执行完这个命令，点击Report at http://localhost:9526/report.html，我们会看到如下的页面：

如图，方块越大，说明该文件占用的文件越大，文件越大，对于网络带宽和访问速度的要求就越高，这也就是我们优化的方向

b.webpack排除打包

CDN是一个比较好的方式，像element这种功能性很全的插件，我们可以放到CDN服务器上，一来，减轻整体包的大小，二来CDN的加速服务可以加快我们对于插件的访问速度

先找到 vue.config.js，添加 externals 让 webpack 不打包 element

  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    externals: {
      'element-ui': 'ELEMENT',
      'vue': 'VUE'
    }
  }

再次运行，会发现包的大小已经大幅减小

CDN文件配置

可以采用CDN的方式处理没有被打包的几个模块，这时的配置实际上是对开发环境和生产环境都生效的，在开发环境时，没有必要使用CDN，此时我们可以使用环境变量来进行区分

在vue.config.js文件中添加
const port = process.env.port || process.env.npm_config_port || 9528 // dev port
let cdn = { css: [], js: [] }
let externals = {}
// 通过环境变量 来区分是否使用cdn
const isProd = process.env.NODE_ENV === 'production'// 判断是否是生产环境
if (isProd) {
  // 如果是生产环境 就排除打包 否则不排除
  externals = {
    // key(包名) / value(这个值 是 需要在CDN中获取js, 相当于 获取的js中 的该包的全局的对象的名字)
    'vue': 'Vue', // 后面的名字不能随便起 应该是 js中的全局对象名
    'element-ui': 'ELEMENT'// 都是js中全局定义的
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css'// 提前引入elementUI样式
    ], // 放置css文件目录
    js: [
      'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui@2.13.2/lib/index.js' // element
    ] // 放置js文件目录
  }
}

configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    externals: externals
},

注入CDN文件到模板

在vue.config.js文件中添加
chainWebpack(config) {
    config.plugin('preload').tap(() => [
      {
        rel: 'preload',
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ])
    config.plugin('html').tap(args => {
        args[0].cdn = cdn
        return args
    })
}

在public/index.html文件中添加：
<head>
   <title><%= webpackConfig.name %></title>
   <!-- 引入样式 -->
   <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
   <link rel="stylesheet" href="<%=css%>">
   <% } %>
</head>
<body>
   <div id="app"></div>
   <!-- built files will be auto injected -->
   <!-- 引入JS -->
   <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
    script src="<%=js%>"></script>
   <% } %>
</body>

最后进行打包：npm run build:prod

验证：用Notepad++打开dist中的index.html文件，点击插件，选择Tidy2中的Tidy(config 1),如下图所示即成功

上线部署

购买阿里云服务器ECS

注册账号--点击控制台--点击云服务器 ECS--点击创建我的ECS

配置服务器安全策略, 阿里云服务默认端口都没开,手动打开,否则无法访问服务器

手动添加安全策略, 优先级 100 端口号80 授权对象 0.0.0.0/0

修改服务器初始密码控制台--->实例---->更多--->重置实例密码密码首字母大写

查找公网ip

打开Xshell7--新建会话--输入主机（H）--点击连接--输入用户名root--输入密码

云服务器安装nginx

a.控制台输入 yum install nginx, 看到一个提示[yes/no], 输入yes回车,安装nginx

b.删除包 yum remove nginx 注意: 不要右键删除!!!

点击新建传输, 打开本地文件和远程服务器桌面

检验nginx是否安装成功，如果有nginx文件夹即安装成功

找到/etc/nginx文件夹(安装nginx才有), 新建一个html文件夹存放项目

把打包后的dist文件夹下的代码复制进html目录下

修改nginx配置文件(重要!!!项目部署的必备条件)

a.找到/etc/nginx文件夹下的nginx.conf文件,右键,记事本打开

b.完整配置项如下, 删掉原文件内容, 复制下面这段(前提条件,服务器配置了80端口,项目存放路径正确)，带注释的部分以实际情况为准

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

   server {
    listen       80;      #端口号
    server_name  47.100.239.38; #主机名，服务器id

    location / {
        root   /etc/nginx/html; #项目打包的目录, 存放在nginx文件夹下的html文件夹内
        try_files $uri $uri/ /index.html; #解决路由刷新404, 项目是history模式, 用这个代码,vue官网提供
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

    location ^~ /prod-api {                        #触发代理的请求
        proxy_pass http://ihrm.itheima.net;   #代理服务目标地址
    }
}
}