• 售前

  • 售后

热门帖子
入门百科

一步一步,一步 从代码到,打包成为手机App,上传至nginx服务器 (Vue项目)

[复制链接]
无人岛屿颈 显示全部楼层 发表于 2022-1-16 15:25:52 |阅读模式 打印 上一主题 下一主题
                                                  目次
                                                 vue.config.js设置
                                                 打包
                                                上线ngnix服务器 
                                                打包成为手机App
  
前言:
  踩了不少坑,熬了挺久的夜总结出来的,记载一下,也渴望资助到必要的小搭档,
  在写项目开始之前,设置别名或跨域,是要提前设置好的,写的过程必要用到,
 vue.config.js设置



  • 新建一个vue.config.js文件 ,内容写在代码中,大概17步调,从11M变成2M,固然了此中的
  • 字体图标和没用的图与json我都没有删除,这个着实还可以在小,一样平常图片都是哀求后端
  • 接口的静态图片,像当地的图片不应该存在很多...
  1. // 1-17步骤
  2. // 3 加载path模块和定义resolve方法, 把相对路径转换成绝对路径
  3. const path = require('path')
  4. const resolve = dir => path.join(__dirname, dir)
  5. // 5 安装去除log包  cnpm install uglifyjs-webpack-plugin --save-dev
  6. //6引入去除log文件
  7. const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  8. const isProduction = process.env.NODE_ENV === 'production';
  9. // 13 对资源文件进行压缩引入
  10. const CompressionWebpackPlugin = require('compression-webpack-plugin')
  11.     // 8 引入cdn
  12. const externals = {
  13.         vue: 'Vue',
  14.         'vue-router': 'VueRouter',
  15.         vuex: 'Vuex',
  16.         vant: 'vant',
  17.         axios: 'axios'
  18.     }
  19.     // CDN外链,会插入到index.html中
  20. const cdn = {
  21.     // 开发环境
  22.     dev: {
  23.         css: [],
  24.         js: []
  25.     },
  26.     // 生产环境
  27.     build: {
  28.         css: ['https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'],
  29.         js: [
  30.             'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
  31.             'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
  32.             'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
  33.             'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
  34.             'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'
  35.         ]
  36.     }
  37. }
  38. module.exports = {
  39.     // 1
  40.     publicPath: './', // 静态资源路径(默认/,打包后会白屏)
  41.     // 2
  42.     productionSourceMap: false, //错误映射,关闭会减少一半体积
  43.     devServer: {
  44.         proxy: {
  45.             "/api": {
  46.                 // http://www.sirfang.com/build/ajax_get_list这是完整路径,将com/后的路径重写路径为api
  47.                 // 1 目标路径 这里相当于公共的地址
  48.                 target: "http://120.53.31.103:84/api",
  49.                 // port: 9090, // 1.1端口号 默认的可以不配
  50.                 open: true, // 1.2运行项目自启
  51.                 //2 允许跨域
  52.                 changOrigin: true,
  53.                 //3 重写路径
  54.                 pathRewrite: {
  55.                     '^/api': ''
  56.                 }
  57.             }
  58.         }
  59.     },
  60.     // 4 添加别名
  61.     chainWebpack: config => {
  62.         config.resolve.alias
  63.             .set('@', resolve('src'))
  64.             .set('assets', resolve('src/assets'))
  65.             .set('api', resolve('src/api'))
  66.             .set('views', resolve('src/views'))
  67.             .set('components', resolve('src/components'))
  68.             // 10  添加CDN参数到htmlWebpackPlugin配置中
  69.             // 11  在pubilc/index 中配置  我放在最下面了
  70.             // 12 cnpm i compression-webpack-plugin -D  对资源文件进行压缩
  71.         config.plugin('html').tap(args => {
  72.                 if (isProduction) {
  73.                     args[0].cdn = cdn.build
  74.                 } else {
  75.                     args[0].cdn = cdn.dev
  76.                 }
  77.                 return args
  78.             })
  79.             // 16 配置图片压缩
  80.         config.module
  81.             .rule('images')
  82.             .use('image-webpack-loader')
  83.             .loader('image-webpack-loader')
  84.             .options({
  85.                 bypassOnDebug: true
  86.             })
  87.             .end()
  88.     },
  89.     // 7 使用去除log
  90.     configureWebpack: config => {
  91.         const plugins = [];
  92.         if (isProduction) {
  93.             // 9 配置cdn
  94.             config.externals = externals
  95.                 // 配置cdn
  96.             plugins.push(
  97.                     new UglifyJsPlugin({
  98.                         uglifyOptions: {
  99.                             output: {
  100.                                 comments: false, // 去掉注释
  101.                             },
  102.                             warnings: false,
  103.                             compress: {
  104.                                 drop_console: true,
  105.                                 drop_debugger: false,
  106.                                 pure_funcs: ['console.log'] //移除console
  107.                             }
  108.                         }
  109.                     }),
  110.                     // 14 对资源文件进行压缩引入进行配置:
  111.                     new CompressionWebpackPlugin({
  112.                         filename: '[path].gz[query]',
  113.                         algorithm: 'gzip',
  114.                         // test: /\.js$|\.html$|\.json$|\.css/,
  115.                         test: /\.js$|\.json$|\.css/,
  116.                         threshold: 10240, // 只有大小大于该值的资源会被处理
  117.                         minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
  118.                         // deleteOriginalAssets: true // 删除原文件
  119.                     })
  120.                     // 15 安装图片压缩 cnpm install image-webpack-loader --save-dev 容易安装不上
  121.                     // 若安装过 image-webpack-loader 先卸载 !!!
  122.                     // npm 安装的npm 则npm 移除
  123.                     // npm uninstall image - webpack - loader
  124.                     //如果yarn安装的,则yarn 移除
  125.                     // yarn remove image - webpack - loader
  126.                 ),
  127.                 // 17公共代码抽离
  128.                 config.optimization = {
  129.                     splitChunks: { // 分割代码块
  130.                         cacheGroups: {
  131.                             vendor: { //第三方库抽离
  132.                                 chunks: 'all',
  133.                                 test: /node_modules/,
  134.                                 name: 'vendor',
  135.                                 minChunks: 1, //在分割之前,这个代码块最小应该被引用的次数
  136.                                 maxInitialRequests: 5,
  137.                                 minSize: 0, //大于0个字节
  138.                                 priority: 100 //权重
  139.                             },
  140.                             common: { //公用模块抽离
  141.                                 chunks: 'all',
  142.                                 test: /[\\/]src[\\/]js[\\/]/,
  143.                                 name: 'common',
  144.                                 minChunks: 2, // 在分割之前, 这个代码块最小应该被引用的次数
  145.                                 maxInitialRequests: 5,
  146.                                 minSize: 0, //大于0个字节
  147.                                 priority: 60
  148.                             },
  149.                             styles: { //样式抽离
  150.                                 name: 'styles',
  151.                                 test: /\.(sa|sc|c)ss$/,
  152.                                 chunks: 'all',
  153.                                 enforce: true
  154.                             },
  155.                             runtimeChunk: {
  156.                                 name: 'manifest'
  157.                             }
  158.                         }
  159.                     }
  160.                 }
  161.         }
  162.     },
  163. }
复制代码

  

  • 以上是设置修改webpack默认设置源码,可以直接赋值,也可以按需求利用,重点都写
  • 在代码段内,再次还要重申一遍,下载压缩图片,大概不会那么轻易乐成,多试频频,牢记
  • 下载不乐成要利用代码下令卸载后,再次重新下载,可参考package.json /devDependencies:{}
 打包



  • 运行npm run build稍等会天生一个dist文件,打开后有index.html利用Open with Live Server打开,
  • alt+b不可以,由于Open with Live Server打开的是当地服务器,Alt+B是相对电脑盘符的,Open with Live Server可以在VSC编辑器下载
上线nginx服务器 

   

  • 下载nginx包 下载地点:nginx: downloadhttp://nginx.org/en/download.html (Nginx官网)
  • 2、下载之后,解压到指定的目次,就可以看到以下的目次

  • 在地点栏运行cmd,不要直接双击ngnix.exe ,
    盘符或目次不能有中文路径,不能直接双击打开(慎用),不自动克制nginx就要比及缓存逾期才会关闭,
  • 可以利用下令关闭,和在任务管理器杀死进程
  • cmd后出现黑窗口,输入下令 start ngnix 启动(一闪黑窗口,没任何提示,此时已经启动乐成)
  • 然后在欣赏器页面输入localhost,默认80端口,


  • 从vsc打开可以修改设置,root可以改为dist,不修改就是打包的文件的根目次是html,
  • 修改为dist,就必要将打包文件dist复制到html下,而不是dist文件夹里的文件复制过来

nginx代码 
  1. #user  nobody;
  2. worker_processes  1;
  3. #error_log  logs/error.log;
  4. #error_log  logs/error.log  notice;
  5. #error_log  logs/error.log  info;
  6. #pid        logs/nginx.pid;
  7. events {
  8.     worker_connections  1024;
  9. }
  10. http {
  11.     include       mime.types;
  12.     default_type  application/octet-stream;
  13.     #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
  14.     #                  '$status $body_bytes_sent "$http_referer" '
  15.     #                  '"$http_user_agent" "$http_x_forwarded_for"';
  16.     #access_log  logs/access.log  main;
  17.     sendfile        on;
  18.     #tcp_nopush     on;
  19.     #keepalive_timeout  0;
  20.     keepalive_timeout  65;
  21.     #gzip  on;
  22.     server {
  23.         listen       33324;
  24.         server_name  localhost;
  25.         #charset koi8-r;
  26.         #access_log  logs/host.access.log  main;
  27.         location / {
  28.             root html;
  29.             try_files $uri $uri/ /index.html last;
  30.             index  index.html index.htm;
  31.         }
  32.         #error_page  404              /404.html;
  33.         # redirect server error pages to the static page /50x.html
  34.         #
  35.         error_page   500 502 503 504  /50x.html;
  36.         location = /50x.html {
  37.             root   html;
  38.         }
  39.         # proxy the PHP scripts to Apache listening on 127.0.0.1:80
  40.         #
  41.         #location ~ \.php$ {
  42.         #    proxy_pass   http://127.0.0.1;
  43.         #}
  44.         # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
  45.         #
  46.         #location ~ \.php$ {
  47.         #    root           html;
  48.         #    fastcgi_pass   127.0.0.1:9000;
  49.         #    fastcgi_index  index.php;
  50.         #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
  51.         #    include        fastcgi_params;
  52.         #}
  53.         # deny access to .htaccess files, if Apache's document root
  54.         # concurs with nginx's one
  55.         #
  56.         #location ~ /\.ht {
  57.         #    deny  all;
  58.         #}
  59.     }
  60.     # another virtual host using mix of IP-, name-, and port-based configuration
  61.     #
  62.     #server {
  63.     #    listen       8000;
  64.     #    listen       somename:8080;
  65.     #    server_name  somename  alias  another.alias;
  66.     #    location / {
  67.     #        root   html;
  68.     #        index  index.html index.htm;
  69.     #    }
  70.     #}
  71.     # HTTPS server
  72.     #
  73.     #server {
  74.     #    listen       443 ssl;
  75.     #    server_name  localhost;
  76.     #    ssl_certificate      cert.pem;
  77.     #    ssl_certificate_key  cert.key;
  78.     #    ssl_session_cache    shared:SSL:1m;
  79.     #    ssl_session_timeout  5m;
  80.     #    ssl_ciphers  HIGH:!aNULL:!MD5;
  81.     #    ssl_prefer_server_ciphers  on;
  82.     #    location / {
  83.     #        root   html;
  84.     #        index  index.html index.htm;
  85.     #    }
  86.     #}
  87. }
复制代码


  • 复制dist文件夹中全部文件,到nginx的html页(上面我没有修改root)

 
然后在欣赏器页面输入localhost:33324就摆设到ngnix服务器上了(端标语写本身设置的) 
打包成为手机App



1.Hbx 编辑器建文件

 2.将dist文件复制在  HbuilderX编辑器创建的文件中

 3. 设置app

 4.发行
 5

6. 点击打包 假如弹出权限,就去认证或将通讯录勾掉,我会吧链接放下面,和图文 

点击 认证 
 
 详情参考我这篇博客vue打包为App手摸手教你_活在风浪里的博客-CSDN博客一、修改哀求静态资源的路径打开config下的index.js文件,修改assetsPublicPath的值,从‘/’改为‘./’。即从根路径改为相对路径。build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetshttps://blog.caogenba.net/m0_57904695/article/details/121574356?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164215790816780265426783%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164215790816780265426783&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-2-121574356.nonecase&utm_term=%E6%89%93%E5%8C%85&spm=1018.2226.3001.4450
感谢你阅读到这里了,还不点歌赞,哈哈


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作