目录
1.首页-echarts图表的应用
2.首页-echarts图表的按需导入
3.路由模式-将路由改成history模式
4. 打包分析-分析
5.CDN加速
6.项目打包-安装nginx
7.mac/windows环境下nginx部署启动项目
8.nginx解决history的404问题
9.nginx配置代理解决生产环境跨域问题
$ npm i echarts
$ yarn add echarts
这里为什么要用watch,因为获取数据在created,初始化图表在mounted,执行mouted时,数据并不能保证能够获取到,所以采用获取watch监听数据变化,只要数据变化,就设置图表的options
为什么 this.social和this.provident 并没有在data中声明,注意,在data中声明的表示它是响应式数据,即它的变化要引起template模板的刷新,但是这里我们只是记录一下当前图表的实例,实例本身会有setOption来影响图表的动态渲染,所以这里并没有必要在data中声明这两个变量
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
])
hash模式带#,#后面的地址变化不会引起页面的刷新
history没有#,地址变化会引起页面刷新,更符合页面地址的规范(开发环境不刷新-webpack配置)
将路由模式修改成history模式-代码位置(src/router/index.js)
const createRouter = () => new Router({
mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes // 默认引入静态路由
})
$ npm run preview -- --report
将几个比较大的多在打包时排除,这样可以缩小整体打包的大小,保证js的加载速度,排除的包采用cdn的方式用外链去引入,cdn本名为分发服务器,意为更近的访问区间更快的访问速度将所需要的文件返回给客户端
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'
}
},
<%= webpackConfig.name %>
$ npm run build:prod
$ yarn build:prod
得到dist文件包
$ brew install nginx # mac安装nginx
$ nginx -v # 查看版本
$ brew info nginx #查看nginx
直接解压就可以直接使用
注意:mac安装可能遇到的问题
遇到某个包发生错误,直接使用brew安装这个包,再安装nginx
$ brew install pcre2 # 安装出错的包
$ brew install nginx # 安装nginx
遇到这个错误,可以直接执行该命令,安装对应的工具,再安装nginx
$ xcode-select --install # 安装对应工具
$ brew install nginx # 安装nginx
brew info nginx #查看nginx
mac-nginx安装目录-/opt/homebrew/Cellar/nginx/1.23.3
mac-配置文件路-/opt/homebrew/etc/nginx/nginx.conf
$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx #启动命令
$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx -s stop #停止命令
注意: mac版本的nginx的默认端口为8080
$ ./nginx -s stop #停止命令
注意: nginx默认的访问端口为80
location / {
try_files $uri $uri/ /index.html;
}
设置不论请求什么地址,都返回index.html
windows配置文件
$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx -s reload #重启
$ ./nginx -s reload #重启
location /prod-api {
proxy_pass https://heimahr-t.itheima.net;
}
$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx -s reload #重启
$ ./nginx -s reload #重启