项目打包及解决跨域

前端金刚
86 阅读1分钟

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

  • hash模式带#，#后面的地址变化不会引起页面的刷新

  • history没有#，地址变化会引起页面刷新，更符合页面地址的规范（开发环境不刷新-webpack配置）

  • 将路由模式修改成history模式-代码位置(src/router/index.js)

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

打包分析-分析

image.png

  • 打包分析代码 - $ npm run preview -- --report
  • 去除main.js中对于mock.js的引用 image.png

CDN加速

image.png

image.png

将几个比较大的多在打包时排除，这样可以缩小整体打包的大小，保证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>

项目打包-安装nginx

image.png

  • 执行打包命令
  • $ npm run build:prod
  • $ yarn build:prod
  • 得到dist文件包

image.png

  • 安装nginx-mac
  • brew install nginx # mac安装nginx
  • 查看版本-mac
  • $ nginx -v # 查看版本
  • 查看nginx-mac
  • $ brew info nginx #查看nginx
  • nginx-windows版本
  • 直接解压就可以直接使用

image.png

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

image.png

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

$ brew install pcre2 # 安装出错的包

$ brew install nginx # 安装nginx

image.png

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

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

$ brew install nginx # 安装nginx

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

image.png

  • mac查看nginx的相关目录
  • brew info nginx #查看nginx

image.png

mac-nginx安装目录-/opt/homebrew/Cellar/nginx/1.23.3

mac-配置文件路-/opt/homebrew/etc/nginx/nginx.conf

  • 将打包的文件放置到安装目录/html下

image.png

  • 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

image.png

  • windows版本启动服务

image.png

image.png

image.png

  • windows下停止服务
  • $ ./nginx -s stop #停止命令

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

nginx解决history的404问题

image.png

  • 修改mac-windows配置文件
location / {
   try_files $uri $uri/ /index.html;
}

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

image.png

  • windows配置文件

image.png

  • mac重启服务
  • $ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx -s reload #重启
  • windows重启服务

$ ./nginx -s reload #重启

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

image.png

image.png

  • nginx解决生产环境跨域 image.png
  • 修改配置文件
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 #重启
avatar
文章
阅读
粉丝