人力资源管理后台 === 首页+部署

news2024/11/26 19:59:28

1.首页-echarts图表的应用

2.首页-echarts图表的按需导入

3.路由模式-将路由改成history模式

4. 打包分析-分析

5.CDN加速

6.项目打包-安装nginx

7.mac/windows环境下nginx部署启动项目

8.nginx解决history的404问题

9.nginx配置代理解决生产环境跨域问题

1.首页-echarts图表的应用

安装echarts包

$ npm i echarts 
$ yarn add echarts

放置两个图表的div，并给定高宽，代码位置(src/views/dashboard/index.vue)

 <div class="chart">
    <!-- 图表 -->
    <div ref="social" style=" width: 100%; height:100% " />
</div>
  <div class="chart">
              <!-- 图表 -->
    <div ref="provident" style=" width: 100%; height:100% " />
  </div>

在mounted中初始化图表-代码位置(src/views/dashboard/index.vue)

<script>
import CountTo from 'vue-count-to'
import { mapGetters } from 'vuex'
import { getHomeData, getMessageList } from '@/api/home'
import * as echarts from 'echarts' // 引入所有的echarts
export default {
  components: {
    CountTo
  },
  data() {
    return {
      homeData: {}, // 存放首页数据的对象
      list: []
    }
  },
  // 计算属性
  computed: {
    ...mapGetters(['name', 'avatar', 'company', 'departmentName']) // 映射给了计算属性
  },
  watch: {
    homeData() {
      console.log(this.homeData)
      // 设置图表
      this.social.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.homeData.socialInsurance?.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.homeData.socialInsurance?.yAxis,
            type: 'line',
            areaStyle: {
              color: '#04c9be' // 填充颜色
            },
            lineStyle: {
              color: '#04c9be' // 线的颜色
            }
          }
        ]
      })
      this.provident.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.homeData.providentFund?.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.homeData.providentFund?.yAxis,
            type: 'line',
            areaStyle: {
              color: '#04c9be' // 填充颜色
            },
            lineStyle: {
              color: '#04c9be' // 线的颜色
            }
          }
        ]
      })
    }
  },
  created() {
    this.getHomeData()
    this.getMessageList()
  },
  mounted() {
    // 获取展示的数据 设置给图表
    // 监听homeData的变化
    this.social = echarts.init(this.$refs.social) // 初始化echart
    // data中没有声明 不是响应式
    this.provident = echarts.init(this.$refs.provident)
  },
  methods: {
    async getHomeData() {
      this.homeData = await getHomeData()
    },
    async getMessageList() {
      this.list = await getMessageList()
    }
  }
}
</script>

这里为什么要用watch，因为获取数据在created，初始化图表在mounted，执行mouted时，数据并不能保证能够获取到，所以采用获取watch监听数据变化，只要数据变化，就设置图表的options

为什么 this.social和this.provident 并没有在data中声明，注意，在data中声明的表示它是响应式数据，即它的变化要引起template模板的刷新，但是这里我们只是记录一下当前图表的实例，实例本身会有setOption来影响图表的动态渲染，所以这里并没有必要在data中声明这两个变量

2.首页-echarts图表的按需导入

echarts图表的按需导入-代码位置(src/views/dashboard/index.vue)

import * as echarts from 'echarts/core' // 引入核心包
import { LineChart } from 'echarts/charts' // 引入折线图
import { GridComponent } from 'echarts/components' // 引入组件
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([
  LineChart,
  GridComponent,
  CanvasRenderer
])

3.路由模式-将路由改成history模式

hash模式带#，#后面的地址变化不会引起页面的刷新
history没有#，地址变化会引起页面刷新，更符合页面地址的规范（开发环境不刷新-webpack配置）
将路由模式修改成history模式-代码位置(src/router/index.js)

const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes // 默认引入静态路由
})

4. 打包分析-分析

打包分析代码

$ npm run preview -- --report

去除main.js中对于mock.js的引用

5.CDN加速

将几个比较大的多在打包时排除，这样可以缩小整体打包的大小，保证js的加载速度，排除的包采用cdn的方式用外链去引入，cdn本名为分发服务器，意为更近的访问区间更快的访问速度将所需要的文件返回给客户端

webpack排除打包-代码位置(vue.config.js)

 configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    // 配置需要排出的包
    externals: {
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'cos-js-sdk-v5': 'COS'
    }
  },

在html中采用外链引入排除的文件-代码位置(public/index.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js" ></script>

  </body>
</html>

6.项目打包-安装nginx

执行打包命令

$ npm run build:prod
$ yarn build:prod

得到dist文件包

安装nginx-mac

$ brew install nginx  # mac安装nginx

查看版本-mac

$ nginx -v  # 查看版本

查看nginx-mac

$ brew info nginx #查看nginx

nginx-windows版本

直接解压就可以直接使用

注意：mac安装可能遇到的问题

遇到某个包发生错误，直接使用brew安装这个包，再安装nginx

$ brew install pcre2  # 安装出错的包
$ brew install nginx  # 安装nginx

遇到这个错误，可以直接执行该命令，安装对应的工具，再安装nginx

$  xcode-select --install  # 安装对应工具
$  brew install nginx  # 安装nginx

7.mac/windows环境下nginx部署启动项目

brew info nginx #查看nginx

mac-nginx安装目录-/opt/homebrew/Cellar/nginx/1.23.3
mac-配置文件路-/opt/homebrew/etc/nginx/nginx.conf

mac-启动服务命令

$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx #启动命令

mac-重启服务

$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx -s stop  #停止命令

注意： mac版本的nginx的默认端口为8080

windows版本启动服务
windows下停止服务

$ ./nginx -s stop  #停止命令

注意: nginx默认的访问端口为80

8.nginx解决history的404问题

修改mac-windows配置文件

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

设置不论请求什么地址，都返回index.html

windows配置文件

mac重启服务

$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx -s reload  #重启

windows重启服务

$ ./nginx -s reload  #重启

9.nginx配置代理解决生产环境跨域问题

nginx解决生产环境跨域

修改配置文件

location /prod-api  {
  proxy_pass https://heimahr-t.itheima.net;
}

mac重启服务

$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx -s reload  #重启

windows重启服务

$ ./nginx -s reload  #重启

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1254984.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！