二、项目打包

haohaohaowa

已于 2024-06-19 17:03:49 修改

阅读量1.6k

点赞数 40

文章标签： vue.js 前端 javascript

于 2024-02-22 11:01:17 首次发布

本文链接：https://blog.csdn.net/haohaohaowa/article/details/136225769

版权

0.测试

1.样式要统一

全局点一点样式（下拉、不同的时间框、图表）

2.屏幕适配

缩小屏幕，把页面和弹框等都看看

3.检查

.env.production

router=>index.js=> base: process.env.VUE_APP_CONTEXT_PATH,

4.login-userName和password

1.打包前配置

1. .env.production文件

# 页面标题
VUE_APP_TITLE = 新疆西沟安全管控平台

# 生产环境配置
ENV = 'production'

# 若依管理系统/生产环境
VUE_APP_BASE_API = '/prod-api'

# 端口
# port = '8080'

# 应用访问路径 例如使用前缀 /admin/
VUE_APP_CONTEXT_PATH = '/'

# 监控地址
VUE_APP_MONITRO_ADMIN = '/admin/login'

# xxl-job 控制台地址
VUE_APP_XXL_JOB_ADMIN = '/xxl-job-admin'

# 文档预览地址
VUE_APP_PRE_API = 'http://192.168.1.23:8012'

2.vue.config.js中不用配置proxy,nginx就配置了

有页面跳转进来这个项目就必须问后端部署ip和端口；

前端不需要配置proxy的话就只配置后端接口代理名称即可

3.如果是内网，有的文件就需要下载放到public下，要注意在public下index.html中引用方式

报错：token<

要和它本身icon引入方式一致，否则会报错：token<

  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= webpackConfig.name %>
  </title>

  <script type="text/javascript" src="<%= BASE_URL %>base64.min.js"></script>

  <!-- 引入cesium -->
  <script type="text/javascript" src="<%= BASE_URL %>lib/Cesium/Cesium.js"></script>
  <link href="<%= BASE_URL %>lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />

没有找到依赖的资源，有前缀！

.env.production 文件里：

```
# 应用访问路径 例如使用前缀 /admin/
VUE_APP_CONTEXT_PATH = '/'

# 若依管理系统/生产环境
VUE_APP_BASE_API = '/prod-api'

```

如果应用访问路径有前缀：报错token <

```
# 应用访问路径 例如使用前缀 /admin/
VUE_APP_CONTEXT_PATH = '/security/'

```

router.js中：添加一句: base: process.env.VUE_APP_CONTEXT_PATH,

```
export default new VueRouter({
  base: process.env.VUE_APP_CONTEXT_PATH,
  mode: "history", // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
});

```

报错：其他页面能行，就一个页面有问题：可能是和别的路由重复名字，没找对组件

4.router/index.js

base: process.env.VUE_APP_CONTEXT_PATH, // 应用访问路径

export default new Router({
  base: process.env.VUE_APP_CONTEXT_PATH,
  mode: "history", // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
});

5.注意

1.login.vue中登录name\password删掉

2.console.log都去掉

删除所有console.log:查找：console。log\(.*\);vscode要打开右侧：正则表达式！

3.permission中whiteList白名单

2.打包

npm run build:prod

检查打包后的文件夹

（打包后文件夹里由dist等压缩包不要提交git!!!）

3.nginx配置

注意：区分 （就只有一个ngix）文件：nginx下面的conf下面的nginx.config文件里，用notepad打开

每次修改都需要 重启nginx :电脑最底层框右键-任务管理器-结束任务（ngix）(两个：先结束内存小的)；然后双击nginx.exe即启动，很快

每个项目本来就应该开一个端口的；开一个端口需要有权限密码的人去开放端口，外部才能通过ip访问此服务器上的项目，（地图数据也需要配置nginx,而且也需要端口是开放的才行）

# 若依管理系统/生产环境
VUE_APP_BASE_API = '/prod-api'  这个是后端代理地址（遇到这个地址就代理成vue.config.js中那个地址），后端让改成啥就改成啥

上面这个是配置访问前缀
location / {
    root    C:/ruanjian\dis\distdianchan\dist/;
    index   index.html index.html;
    try_files $uri $ui/ /index.html
}
location /shovel/ {
    alias   C:/ruanjian\dis\distxx\dist/;
    index   index.html index.html;
    try_files $uri $ui/ /distxx/index.html
}
配置

下面这个是后端配置的代理接口
location /digital-api {
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_Addr;
    proxy_set_header REMOTE-HOST $remote_Addr;
    proxy_set_header X-Forwarded-For $proxy_Add_x_forwarded+for;
    proxy_pass http://localhost:8085/;
}
配置

# 应用访问路径 例如使用前缀 /admin/ 后面要加上/
# VUE_APP_CONTEXT_PATH = '/'  这个是多项目时，区分项目需要配置的前缀
VUE_APP_CONTEXT_PATH = '/shovel/'  这个是多项目时，区分项目需要配置的前缀

代理：proxy只是本地代理，部署的时候只需要配置nginx代理，不用管proxy

devServer: {
    host: "0.0.0.0",
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        // target: `http://192.168.1.13:8080`, // 真正请求的url
        target: `http://192.168.10.41:8080`, // 打包
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "",
        },
      },
    },
    disableHostCheck: true,
  },

上面是本地代理：拦截target: http://192.168.1.13:8080,，换成process.env.VUE_APP_BASE_API ，即在.env.production(development)中配置的（'/dev-api' '/prod-api'）

后部署时可以后端在nginx配置，直接拦截 .env.production中的

若依管理系统/生产环境 VUE_APP_BASE_API = '/prod-api' // 在nginx中会获取到这个然后做代理

中的 '/prod-api' 代理成别的 a地址，所以前端就不需要配置proxy。这个a地址就是项目部署地址，要跳转查看这个项目的时候就需要获取倒这个地址

nginx代理干货：https://blog.51cto.com/jiangxl/5169878，百度安全验证，https://www.cnblogs.com/ysocean/p/9392908.html#_label2

eg: 使用 nginx 反向代理 www.123.com 直接跳转到127.0.0.1:8080

在 nginx.conf 配置文件中增加如下配置：

  server {
2         listen       80;
3         server_name  www.123.com;
4 
5         location / {
6             proxy_pass http://127.0.0.1:8080;
7             index  index.html index.htm index.jsp;
8         }
9     }

注意：后端接口调错就看着nginx配置的后端地址

去线上查看调用的接口！！！！！！！！！！

# 若依管理系统/生产环境
VUE_APP_BASE_API = '/shovel-api'

其他

1.远程别的电脑：电脑左下角搜索远程桌面连接

2.本B项目嵌入别人的A项目-登录不进去或者页面跳转跨域

1.ip相同，端口不同，token-存在cookies能共享（localstorage不共享）

2.ip不同

方法1：不要跳转新页面，就在本页面跳转

方法2：A项目配置nginx 代理我们的ip

iframe嵌套第三方页面跨域带cookie问题_iframe cookie跨域-CSDN博客