网站建设开发进度表,网站维护与建设考试,sem优化师,移动网站 案例目录 1.首页-echarts图表的应用
2.首页-echarts图表的按需导入
3.路由模式-将路由改成history模式
4. 打包分析-分析
5.CDN加速
6.项目打包-安装nginx
7.mac/windows环境下nginx部署启动项目
8.nginx解决history的404问题
9.nginx配置代理解决生产环境跨域问题 1.首页-…目录 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 classchart!-- 图表 --div refsocial style width: 100%; height:100% /
/divdiv classchart!-- 图表 --div refprovident 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 supportscrollBehavior: () ({ 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 apps title in webpacks 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
htmlheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedge,chrome1meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalablenolink relicon href% BASE_URL %favicon.icotitle% webpackConfig.name %/titlelink hrefhttps://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css relstylesheet/headbodynoscriptstrongWere sorry but % webpackConfig.name % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscriptdiv idapp/div!-- built files will be auto injected --script srchttps://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js/scriptscript srchttps://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 #查看nginxnginx-windows版本 直接解压就可以直接使用 注意mac安装可能遇到的问题 遇到某个包发生错误直接使用brew安装这个包再安装nginx
$ brew install pcre2 # 安装出错的包
$ brew install nginx # 安装nginx遇到这个错误可以直接执行该命令安装对应的工具再安装nginx
$ xcode-select --install # 安装对应工具
$ brew install nginx # 安装nginx7.mac/windows环境下nginx部署启动项目 mac查看nginx的相关目录
brew info nginx #查看nginx mac-nginx安装目录-/opt/homebrew/Cellar/nginx/1.23.3 mac-配置文件路-/opt/homebrew/etc/nginx/nginx.conf
将打包的文件放置到安装目录/html下 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 #重启
