Welcome to Liuxinxiu'S Blog.
第一页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式： 摘要 | 列表 ]

Nuxt.js踩坑分享

[不指定 2018/05/22 09:11 | by 刘新修 ]

 

构建问题

1. 如何在 head 里面引入js文件?

背景: 在<head>标签中，以inline的形式引入flexible.js文件。本项目主要为移动端项目，引入flexible.js 实现移动端适配问题。

Nuxt.js 通过 vue-meta 实现头部标签管理，通过查看文档发现，可以按照如下方式配置：

// nuxt.config.js head: {   script: [     { innerHTML: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'}   ] }

结果，生成 html:

<script data-n-head="true" type="text/javascript" charset="utf-8">console.log(&quot;hello&quot;)</script>

我们发现 vue-meta 把引号做了转义处理，加入 __dangerouslyDisableSanitizers: ['script'] 后，就不会再对这些字符做转义了，该字段使用需慎重！

接下来，要把 console.log("hello") 的内容替换成 flexible.js，配置升级之后：

head: {   script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'}],   __dangerouslyDisableSanitizers: ['script'] }

踩坑成功，下一个坑...

2. 如何使用预处理器

背景：在组件中的<template>， <script> 或 <style> 上使用各种预处理器，加上处理器后，控制台报错。
<style lang="sass"> .red   color: red </style>

这个问题解决方法非常简单，只需要安装这些依赖就好。

npm install --save-dev node-sass sass-loader

但是解决过程并不是很顺利的，在阅读中文文档时，忽略版本号，按照上面的提示进行操作，发现不能成功，后来各种debug，最后发现了该解决方案。后知后觉的发现了中文文档的版本号过低，如果需要查看文档，一定要看最新版本的英文文档！

3. 如何使用px2rem

背景：在css中，写入px，通过px2rem loader，将px转换成rem

在以前的项目中，是通过 px2rem loader实现的，但是在Nuxt.js项目下，添加 css loader 还是很费力的，因为涉及到vue-loader。

想到了一个其他方案，可以使用 postcss 处理。可以在 nuxt.config.js 文件中添加配置，也可以在postcss.conf.js文件中添加。

build: {   postcss: [     require('postcss-px2rem')({       remUnit: 75 // 转换基本单位     })   ] },

4. 如何拓展 webpack 配置

背景：给 utils 目录添加别名

刚刚说到，Nuxt.js内置了 webpack 配置，如果想要拓展配置，可以在 nuxt.config.js 文件中添加。同时也可以在该文件中，将配置信息打印出来。

extend (config, ctx) {   console.log('webpack config:', config)   if (ctx.isClient) {     // 添加 alias 配置     Object.assign(config.resolve.alias, {       'utils': path.resolve(__dirname, 'utils')     })   } }

5. 如何添加 vue plugin

背景：自己封装了一个 toast vue plugin，由于 vue 实例化的过程没有暴露出来，不知道在哪个时机注入进去。

可以在 nuxt.config.js 中添加 plugins 配置，这样插件就会在 Nuxt.js 应用初始化之前被加载导入。

module.exports = {   plugins: ['~plugins/toast'] }

~plugins/toast.js 文件：

import Vue from 'vue' import toast from '../utils/toast' import '../assets/css/toast.css'  Vue.use(toast)

6.如何修改环境变量 NODE_ENV

背景：在项目中，设置 3个 NODE_ENV 的值，来对应不同的版本。development，本地开发；release，预发布版本；production，线上版本。其中，预发布版本比production版本，多出vconsole。
// package.json "scripts": {   "buildDev": "cross-env NODE_ENV=release nuxt build && backpack build",   "startDev": "cross-env NODE_ENV=release PORT=3000 node build/main.js"   },

打印 process.env.NODE_ENV 依旧是，production。

在 backpack 的源码中，找到了答案，在 执行 backpack build 命令时，会把 process.env.NODE_ENV 修改为 production，并且是写死的不可配置的......

无奈下，只能在 process.env 下，添加 __ENV 属性，代表 NODE_ENV

clipboard.png

这时，在页面中打印出来的信息 process.env.__ENV undefined，但是可以打印出 process.env.NODE_ENV。

可以通过配置 nuxt.config.js 中的，env属性，解决该问题。

env: {   __ENV: process.env.__ENV }

开发问题

1. Window 或 Document 对象未定义？

背景: 在引入第三方插件，或者直接在代码中写 window 时，控制台会给出警告，window 未定义。

发生在这个问题的原因时，node服务端并没有window 或 document 对象。解决方法，通过 process.browser 来区分环境。

if (process.browser) {   // 引入第三方插件   require('***')   // 或者修改window对象下某一属性   window.mbk = {} }
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(118)

SyntaxError: Unexpected token ...

[不指定 2018/05/22 09:08 | by 刘新修 ]

 D:\code\nuxtjsdemo\node_modules\nuxt\lib\core\middleware\nuxt.js:72

      const policies = this.options.render.csp.policies ? {...this.options.rende r.csp.policies} : null  SyntaxError: Unexpected token ...

平台环境
nodejs 8.2.0
vue-cli 2.9.3

 

写得很明确了

SyntaxError: Unexpected token ...

对象解构赋值语法报错

解决方案：

  1. 查一下 node 9.x 已经支持 对象解构赋值了没有，换更新的nodejs
  2. 如果还未支持，使用babel + babel 插件babel-plugin-transform-object-rest-spread
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(89)

Vue2.0+组件库总结

[不指定 2018/05/18 08:26 | by 刘新修 ]

UI组件

开发框架

实用库

服务端

  • nuxt.js - 用于服务器渲染Vue app的最小化框架

  • express-vue - 简单的使用服务器端渲染vue.js

  • vue-ssr - 非常简单的VueJS服务器端渲染模板

  • vue-ssr - 结合Express使用Vue2服务端渲染

  • vue-easy-renderer - Nodejs服务端渲染

辅助工具

应用实例

Demo示例

 

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(89)

Nuxt Windows部署到Linux重新初始化依赖包

[不指定 2018/01/09 10:50 | by 刘新修 ]
C#代码
  1. mkdir -p /data/nodejs/htdocs/vue/nuxt/ycw  
  2. /data/nodejs/htdocs/vue/nuxt/ycw  
  3. wget http://192.168.180.91/CNMO/vue-nuxt2.tar  
  4. tar xvf vue-nuxt2.tar  
  5. npm i  
  6. npm run build  
  7. npm run start  
  8.  
  9. #########################################  
  10. vi node_modules/nuxt/bin/nuxt-start  
  11. host = "0.0.0.0"  
  12. #########################################  
  13. "config": {  
  14.     "nuxt": {  
  15.         "host": "127.0.0.1",  
  16.         "port": "3000"  
  17.     }  
  18. },  
  19. "config": {  
  20.     "nuxt": {  
  21.         "host": "0.0.0.0",  
  22.         "port": "3000"  
  23.     }  
  24. },  
  25.  
  26. #########################################  
  27. node node_modules/nuxt/bin/nuxt-start   
  28.  
  29. #########################################  
  30. 如果出现错误无法启动  
  31. ps | grep node  
  32. kill <id>  
NodeJs平台 | 评论(0) | 引用(0) | 阅读(454)

Linux 搜索文件中的字符串

[不指定 2017/12/27 06:07 | by 刘新修 ]
C#代码
  1. [root@sd-cnmo-lidandan-web1 www]# find -type f -name '*.php'|xargs grep 'Plugin_Header'  
Tags: ,
Linux/Unix | 评论(0) | 引用(0) | 阅读(397)

PHP_遍历节日数组判断当前节日

[不指定 2017/12/19 10:14 | by 刘新修 ]
PHP代码
  1. <?php  
  2.   
  3.     /****** 获取版本号 || 获取Cookie ******/  
  4.     if (isset($_COOKIE["BUILD_NUMBER"])){  
  5.         $_Assets = "?v=".$_COOKIE['BUILD_NUMBER'];  
  6.     }else{  
  7.         $_Assets = "";  
  8.     }  
  9.     /********** 2018年度节日汇总 || 2017-12-19 *************
  10.     元旦      -- yuandan  ||  - 201730、31-01
  11.     春节      -- chunjie  ||  - 20180215-21
  12.     元宵节    -- yuanxiao ||  - 20180302
  13.     情人节    -- qingren  ||  - 20180214
  14.     妇女节    -- funv     ||  - 20180308
  15.     劳动节    -- laodong  ||  - 20180501-
  16.     母亲节    -- muqin    ||  - 20180513
  17.     儿童节    -- ertong   ||  - 20180601
  18.     端午节    -- duanwu   ||  - 20180616-18
  19.     父亲节    -- fuqin    ||  - 20180616-18
  20.     七夕节    -- qixi     ||  - 20180817
  21.     教师节    -- jiaoshi  ||  - 20180910
  22.     中秋节    -- zhongqiu ||  - 20180922-24
  23.     国庆节    -- guoqing  ||  - 20181001-07
  24.     圣诞节    -- shengdan ||  - 20181225
  25.     双11      -- 1111     ||  - 20181111
  26.     双12      -- 1212     ||  - 20181212
  27.     京东618   -- 618      ||  - 20180618
  28.     苏宁818   -- 818      ||  - 20180818
  29.     *****************************************/  
  30.     $dayArr = array('yuandan=2017-12-30+1',    //3天-跨  
  31.                     'yuandan=2018-01-01+0',    //3天-跨  
  32.                     'chunjie=2017-02-15+6',    //7天  
  33.                     'qingren=2018-02-14+0',    //1天  
  34.                     'funv=2018-03-08+0',       //1天  
  35.                     'laodong=2018-04-29+1',    //3天-跨  
  36.                     'laodong=2018-05-01+0',    //3天-跨  
  37.                     'muqin=2018-05-13+0',      //1天  
  38.                     'ertong=2018-06-01+0',     //1天  
  39.                     'duanwu=2018-06-16+2',     //3天  
  40.                     'fuqin=2018-06-17+0',      //1天  
  41.                     'qixi=2018-08-17+0',       //1天  
  42.                     'jiaoshi=2018-09-10+0',    //1天  
  43.                     'zhongqiu=2018-09-22+2',   //3天  
  44.                     'guoqing=2018-10-01+6',    //7天  
  45.                     'shengdan=2018-12-25+0',   //1天  
  46.                     'd1111=2018-11-11+0',      //1天  
  47.                     'd1212=2018-12-12+0',      //1天  
  48.                     'd618=2018-06-18+0',       //1天  
  49.                     'd818=2017-12-12+0');      //1天  
  50.     /**********************************************
  51.      遍历数组判断，添加Class标记
  52.     **********************************************/  
  53.     $dayNux = count($dayArr);  
  54.     if(isset($_GET["day"])&&!emptyempty($_GET["day"])){  
  55.         $currentDate = $_GET["day"];  
  56.     }else{  
  57.         $currentDate = date('Ymd');  
  58.     }  
  59.     for($i=0;$i<$dayNux;++$i){  
  60.         $dayData = $dayArr[$i];  
  61.         $dayNums = substr(strrchr($dayData, "+"),1);  
  62.         $dayAlls = substr($dayData,0,strrpos($dayData,'+'));  
  63.         $dayStar = substr(strrchr($dayAlls, "="),1);  
  64.         $dayName = substr($dayAlls,0,strrpos($dayAlls,'='));  
  65.         $flagSt = $currentDate-(str_replace("-","",$dayStar));  
  66.         /****** 命中退出 ******/  
  67.         if($flagSt>-1&&$flagSt<=$dayNums){  
  68.             $dayClass=' '.$dayName;  
  69.             break;  
  70.         }else{  
  71.             if($i==$dayNux-1){  
  72.                $dayClass='';  
  73.             }  
  74.         }  
  75.     }  
  76.   
  77. ?>  

111

PHP代码
  1. <?php   
  2. /** 
  3.  * Ajax.class.php 
  4.  * ============================================== 
  5.  * Copy right 2016-2999 http://www.cnmo.com 
  6.  * ---------------------------------------------- 
  7.  * 修改之前请加上修改人和修改日志 
  8.  * ============================================== 
  9.  * @param 手机中国 - 平台中心 - TECH 
  10.  * @return return_type 
  11.  * @author: zhangyang 
  12.  * @date: 2016-10-10 
  13.  * @version: v1.0.0 
  14.  */  
  15. class Controller_Ajax extends CC_Core_Controller  
  16. {  
  17.     /** 
  18.      * @func: 大家都在玩 
  19.      * @date: 2016-10-10  
  20.      * @author: zhangyang 
  21.      * @return: 大家都在玩 
  22.      */  
  23.     public function doGetAllPlay()  
  24.     {  
  25.         $platform = (int) $_REQUEST['platform'];  
  26.           
  27.         $appInfo  = Service_Home :: getAppList($platform, 0, 4);  
  28.         $gameInfo = Service_Home :: getGameList($platform, 0, 4);  
  29.         $allPlayInfo = CC_Kit_String :: iconv('gbk','utf-8',array('appList' => $appInfo,'gameList' => $gameInfo));  
  30.         echo json_encode($allPlayInfo);  
  31.         die;  
  32.     }  
  33.       
  34.     /** 
  35.      * @desc: 获取投诉列表 
  36.      * @author: zhangyang 
  37.      * @date: 2016-10-10 
  38.      */  
  39.     public function doGetComplain()  
  40.     {  
  41.         $complain = Service_Home::getComplain();  
  42.         $complain = CC_Kit_String::iconv('gbk', 'utf-8', $complain);  
  43.           
  44.         echo json_encode($complain);  
  45.         die;  
  46.     }  
  47.       
  48.     /** 
  49.      * 活动包版 
  50.      * @author lidandan 
  51.      * @version 2016-12-28 
  52.      */  
  53.     // public function doActive()  
  54.     // {  
  55.     //     $nowtime = date('Y-m-d H:i:s', time());  
  56.               
  57.     //     $status = 0;  
  58.     //     if($nowtime >= '2016-12-30 10:00:00' && $nowtime <= '2017-01-02 23:59:59'){//奥运会包版  
  59.     //         $status = 1;  
  60.     //     }elseif($nowtime >= '2017-01-23 00:00:00' && $nowtime <= '2017-02-02 23:59:59'){//新年包版  
  61.     //         $status = 2;  
  62.     //     }elseif($nowtime >= '2017-02-10 16:00:00' && $nowtime <= '2017-02-12 23:59:59'){//元宵节  
  63.     //         $status = 3;  
  64.     //     }elseif($nowtime >= '2017-02-14 00:00:00' && $nowtime <= '2017-02-14 23:59:59'){//情人节  
  65.     //         $status = 4;  
  66.     //     }elseif($nowtime >= '2017-03-07 10:00:00' && $nowtime <= '2017-03-08 23:59:59'){//妇女节  
  67.     //         $status = 5;  
  68.     //     }elseif($nowtime >= '2017-04-01 13:30:00' && $nowtime <= '2017-04-04 23:59:59'){//清明节  
  69.     //         $status = 6;  
  70.     //     }elseif($nowtime >= '2017-04-27 12:00:00' && $nowtime <= '2017-05-02 12:00:00'){//五一  
  71.     //         $status = 7;  
  72.     //     }elseif($nowtime >= '2017-05-14 00:00:00' && $nowtime <= '2017-05-14 23:59:59'){//母亲节  
  73.     //         $status = 8;  
  74.     //     }elseif($nowtime >= '2017-05-27 12:00:00' && $nowtime <= '2017-05-30 23:59:59'){//端午  
  75.     //         $status = 9;  
  76.     //     }elseif($nowtime >= '2017-06-01 03:00:00' && $nowtime <= '2017-06-01 23:59:59'){//六一  
  77.     //         $status = 10;  
  78.     //     }elseif($nowtime >= '2017-06-18 00:00:00' && $nowtime <= '2017-06-18 23:59:59'){//父亲节  
  79.     //         $status = 11;  
  80.     //     }  
  81.       
  82.     //     echo $status;  
  83.     //     exit;  
  84.     // }  
  85.   
  86.   
  87.     /** 
  88.      * 活动包版 
  89.      * @author liuxinxiu 
  90.      * @version 2017-12-20 
  91.      */  
  92.     public function doActive()  
  93.     {  
  94.         /********** 2018年度节日汇总 || 2017-12-19 ************* 
  95.         ======================================= 
  96.         名称        代码(class)  ||   时间跨度 
  97.         ======================================= 
  98.         元旦      -- yuandan   ||  - 20171230、31-01 
  99.         春节      -- chunjie   ||  - 20180215=>21 
  100.         元宵节    -- yuanxiao  ||  - 20180302=>02 
  101.         情人节    -- qingren   ||  - 20180214=>14 
  102.         妇女节    -- funv      ||  - 20180308=>08 
  103.         劳动节    -- laodong   ||  - 20180429、30-01 
  104.         母亲节    -- muqin     ||  - 20180513=>13 
  105.         儿童节    -- ertong    ||  - 20180601=>01 
  106.         端午节    -- duanwu    ||  - 20180616=>18 
  107.         父亲节    -- fuqin     ||  - 20180616=>18 
  108.         七夕节    -- qixi      ||  - 20180817=>17 
  109.         教师节    -- jiaoshi   ||  - 20180910=>10 
  110.         中秋节    -- zhongqiu  ||  - 20180922=>24 
  111.         国庆节    -- guoqing   ||  - 20181001=>07 
  112.         圣诞节    -- shengdan  ||  - 20181225=>25 
  113.         双11      -- d1111     ||  - 20181111=>11 
  114.         双12      -- d1212     ||  - 20181212=>12 
  115.         京东618   -- d618      ||  - 20180618=>18 
  116.         苏宁818   -- d818      ||  - 20180818=>18 
  117.         *****************************************/  
  118.         /******* 公共声明 ********/  
  119.         header('Content-type: text/json');  
  120.         $dayArr = array('yuandan=2017-12-22 12:00>2018-01-01 23:59',    //3天-跨  
  121.                         'chunjie=2018-02-15 00:00>2018-02-21 23:59',    //7天-跨  
  122.                         'qingren=2018-02-14 00:00>2018-02-14 23:59',    //1天  
  123.                         'funv=2018-03-08 00:00>2018-03-08 23:59',       //1天  
  124.                         'qingming=2018-04-05 00:00>2018-04-07 23:59',   //3天-跨  
  125.                         'laodong=2018-04-29 00:00>2018-05-01 23:59',    //3天-跨  
  126.                         'muqin=2018-05-13 00:00>2018-05-13 23:59',      //1天  
  127.                         'ertong=2018-06-01 00:00>2018-06-01 23:59',     //1天  
  128.                         'duanwu=2018-06-16 00:00>2018-06-18 23:59',     //3天-跨  
  129.                         'fuqin=2018-06-17 00:00>2018-06-17 23:59',      //1天-合  
  130.                         'qixi=2018-08-17 00:00>2018-08-17 23:59',       //1天  
  131.                         'jiaoshi=2018-09-10 00:00>2018-09-10 23:59',    //1天  
  132.                         'zhongqiu=2018-09-22 00:00>2018-09-24 23:59',   //3天  
  133.                         'guoqing=2018-10-01 00:00>2018-10-07 23:59',    //7天  
  134.                         'shengdan=2018-12-25 00:00>2018-12-25 23:59',   //1天  
  135.                         'd1111=2018-11-11 00:00>2018-11-11 23:59',      //1天  
  136.                         'd1212=2018-12-12 00:00>2018-12-12 23:59',      //1天  
  137.                         'd618=2018-06-18 00:00>2018-06-18 23:59',       //1天  
  138.                         'd818=2018-06-18 00:00>2018-08-18 23:59');      //1天  
  139.         /********************************************** 
  140.          遍历数组判断，添加Class标记 
  141.         **********************************************/  
  142.         $dayNux = count($dayArr);  
  143.         if(isset($_GET["day"])&&!emptyempty($_GET["day"])){  
  144.             $currentDate = $_GET["day"];  
  145.         }else{  
  146.             $currentDate = date('Ymdhi');  
  147.         }  
  148.         for($i=0;$i<$dayNux;++$i){  
  149.             $dayData = $dayArr[$i];  
  150.             $dayEndx = substr(strrchr($dayData, ">"),1);  
  151.             $dayAlls = substr($dayData,0,strrpos($dayData,'>'));  
  152.             $dayStar = substr(strrchr($dayAlls, "="),1);  
  153.             $dayName = substr($dayAlls,0,strrpos($dayAlls,'='));  
  154.             $dStar = str_replace(array("-",":"," "),"",$dayStar);  
  155.             $dEndx = str_replace(array("-",":"," "),"",$dayEndx);  
  156.             /****** 命中退出 ******/  
  157.             if($currentDate>=$dStar && $currentDate<=$dEndx){  
  158.                 $dayClass='"'.$dayName.'"';  
  159.                 break;  
  160.             }else{  
  161.                 if($i==$dayNux-1){  
  162.                    $dayClass=0;  
  163.                 }  
  164.             }  
  165.         }  
  166.         $jsonStr='{ 
  167.             "status":1, 
  168.             "info":"请求成功!", 
  169.             "dayClass":'.$dayClass.' 
  170.         }';  
  171.         echo $jsonStr;  
  172.         exit;  
  173.     }  
  174. }  

 

PHP/Java | 评论(0) | 引用(0) | 阅读(454)

PHP替换字符串

[不指定 2017/12/19 10:03 | by 刘新修 ]
PHP代码
  1. <?php  
  2. $str =  "我_们_的_=家+园";  
  3. $str = str_replace(array("_","=","+"),"",$str);  
  4. echo  $str; //我们的家园  
  5. ?>  
Tags: ,
PHP/Java | 评论(0) | 引用(0) | 阅读(442)

PHP=HTTP请求并处理返回结果

[不指定 2017/12/19 08:41 | by 刘新修 ]
PHP代码
  1. <?php  
  2.     echo '<h1 style="margin-top:100px;">xxxx--11-</h1>';  
  3.     echo $redis;  
  4.   
  5.     /****** 获取最新版本号 ******/  
  6.     $optsJson = array(  
  7.         'http'=>array(  
  8.             'method'=>"GET",  
  9.             'timeout'=>60,  
  10.         )  
  11.     );  
  12.     $contextJson = stream_context_create($optsJson);  
  13.     $dataJson =file_get_contents('http://statict.cnmo-img.com.cn/origin/assets.json', false, $contextJson);  
  14.     $arrJson = json_decode($dataJson,true);  
  15.     $buildNumber = $arrJson['BUILD_NUMBER'];  
  16.     //输出  
  17.     //var_dump($arr['BUILD_NUMBER']);  
  18.     echo $buildNumber;  
  19.     setcookie("Age","18");  
  20.     if(isset($buildNumber)&&!emptyempty($buildNumber)){  
  21.         setcookie("BUILD_NUMBER",$buildNumber, time()+3600*24);  
  22.     }else{  
  23.         setcookie("NULL",$buildNumber, time()+3600*24);  
  24.     }  
  25.   
  26. ?>  
PHP/Java | 评论(0) | 引用(0) | 阅读(435)

查看apache日志相关细节

[不指定 2017/11/20 09:55 | by 刘新修 ]

查看apache日志相关细节

C#代码
  1. 1、查看当天有多少个IP访问：    
  2. awk '{print $1}' access_log.2017110800|sort|uniq|wc -l    
  3.     
  4. 2、查看某一个页面被访问的次数;    
  5. grep "/index.php" access_log.2017110800 | wc -l    
  6.     
  7. 3、查看每一个IP访问了多少个页面：    
  8. awk '{++S[$1]} END {for (a in S) print a,S[a]}' access_log.2017110800   
  9.     
  10. 4、将每个IP访问的页面数进行从小到大排序：    
  11. awk '{++S[$1]} END {for (a in S) print S[a],a}' access_log.2017110800 | sort -n    
  12.     
  13. 5、查看某一个IP访问了哪些页面：    
  14. grep ^111.111.111.111 access_log.2017110800| awk '{print $1,$7}'    
  15.     
  16. 6、去掉搜索引擎统计当天的页面：    
  17. awk '{print $12,$1}' access_log.2017110800 | grep ^\"Mozilla | awk '{print $2}' |sort | uniq | wc -l    
  18.     
  19. 7、查看2009年6月21日14时这一个小时内有多少IP访问：    
  20.  awk '{print $4,$1}' access_log.2017110800 | grep 21/Jun/2009:14 | awk '{print $2}'| sort | uniq | wc -l    
web服务器 | 评论(0) | 引用(0) | 阅读(493)

Linux shell 之 提取文件名和目录名的一些方法

[不指定 2017/11/17 09:51 | by 刘新修 ]

很多时候在使用Linux的shell时，我们都需要对文件名或目录名进行处理，通常的操作是由路径中提取出文件名，从路径中提取出目录名，提取文件后缀名等等。例如，从路径/dir1/dir2/file.txt中提取也文件名file.txt，提取出目录/dir1/dir2，提取出文件后缀txt等。

下面介绍两种常用的方法来进行相关的操作。

一、使用${}

1、${var##*/}

该命令的作用是去掉变量var从左边算起的最后一个'/'字符及其左边的内容，返回从左边算起的最后一个'/'（不含该字符）的右边的内容。使用例子及结果如下：

liuxinxiu@HongKong: var=/dir1/dir2/file.txt

liuxinxiu@HongKong: echo ${var##*/}

file.txt

从运行结果可以看到，使用该命令，可以提取出我们需要的文件名file.txt。

若使用时在shell程序文件中，可以使用变量来保存这个结果，再加以利用，如file=${var##*/}

2、${var##*.}

该命令的作用是去掉变量var从左边算起的最后一个'.'字符及其左边的内容，返回从左边算起的最后一个'.'（不含该字符）的右边的内容。使用例子及结果如下：

liuxinxiu@HongKong: var=/dir1/dir2/file.txt

liuxinxiu@HongKong: echo ${var##*.}

txt

从运行结果可以看到，使用该命令，可以提取出我们需要的文件后缀。

如果文件的后缀不仅有一个，例如，file.tar.gz，命令${var##*.}仅能提取最后一个后缀，而我想提取tar.gz时该怎么办？那么就要用下面所说的${var#*.}命令了。

3、${var#*.}

该命令的作用是去掉变量var从左边算起的第一个'.'字符及其左边的内容，返回从左边算起第一个'.'（不含该字符）的右边部分的内容。使用例子及结果如下：

liuxinxiu@HongKong: var=/dir1/dir2/file.tar.gz

liuxinxiu@HongKong: echo ${var#*.}

tar.gz

从运行结果可以看到，使用该命令，可以提取出文件的多个后缀。

4、${var%/*}

该命令的使用是去掉变量var从右边算起的第一个'/'字符及其右边的内容，返回从右边算起的第一个'/'（不含该字符）的左边的内容。使用例子及结果如下：

liuxinxiu@HongKong: var=/dir1/dir2/file.txt

liuxinxiu@HongKong: echo ${var%/*}

/dir1/dir2

从运行的结果可以看到，使用该命令，可以提取出我们需要的文件所在的目录

5、${var%%.*}

该命令的使用是去掉变量var从右边算起的最后一个'.'字符及其右边的内容，返回从右边算起的最后一个'.'（不含该字符）的左边的内容。使用例子及结果如下：

liuxinxiu@HongKong: var=/dir1/dir2/file.txt

liuxinxiu@HongKong: echo ${var%%.*}

/dir1/dir2/file

当我们需要建立一个与文件名相同名字（没有后缀）的目录与对应的文件相对应时，就可以使用该命令来进行操作。例如，解压文件的情况就与此类似，我们压缩文件file.zip时，会在与file.zip同级目录下建立一个名为file的目录。

6、${}总结

其实${}并不是专门为提取文件名或目录名的，它的使用是变量的提取和替换等等操作，它可以提取非常多的内容，并不一定是上面五个例子中的'/'或'.'。也就是说，上面的使用方法只是它使用的一个特例。

看到上面的这些命令，可能会让人感到非常难以理解和记忆，其实不然，它们都是有规律的。

#：表示从左边算起第一个

%：表示从右边算起第一个

##：表示从左边算起最后一个

%%：表示从右边算起最后一个

换句话来说，＃总是表示左边算起，％总是表示右边算起。

＊：表示要删除的内容，对于#和##的情况，它位于指定的字符（例子中的'/'和'.'）的左边，表于删除指定字符及其左边的内容；对于%和%%的情况，它位于指定的字符（例子中的'/'和'.'）的右边，表示删除指定字符及其右边的内容。这里的'*'的位置不能互换，即不能把*号放在#或##的右边，反之亦然。

例如：${var%%x*}表示找出从右边算起最后一个字符x，并删除字符x及其右边的字符。

看到这里，就可以知道，其实该命令的用途非常广泛，上面只是指针文件名和目录名的命名特性来进行提取的一些特例而已。

二、basename和dirname

${}并不是专门为提取文件名和目录名设计的命令，那么basename和dirname命令就是专门为做这一件事而已准备的了。

1、basename

该命令的作用是从路径中提取出文件名，使用方法为basename NAME [SUFFIX]。

1）从路径中提出出文件名（带后缀），例子如下：

liuxinxiu@HongKong: var=/dir1/dir2/file.txt

liuxinxiu@HongKong: echo (basename $var)

file.txt

2）从上面命令的用法中可以看到，后缀（SUFFIX）是一个可选项。所以，若只想提取出文件名file，而不带有后缀，还可以在变量的后面加上后缀名，例子如下：

liuxinxiu@HongKong: var=/dir1/dir2/file.txt

liuxinxiu@HongKong: echo (basename $var .txt)

file

2、dirname

该命令的作用是从路径中提取出目录名，使用方法为 dirname NAME

使用例子如下：

liuxinxiu@HongKong: var=/dir1/dir2/file.txt

liuxinxiu@HongKong: dirname $var

/dir1/dir2

这样就提取出了file.txt文件所在的目录。

注：该命令不仅能提取出普通文件所的目录，它能提取出任何文件所在的目录，例如目录所在的目录，如下：

liuxinxiu@HongKong: var=/dir1/dir2/

liuxinxiu@HongKong: dirname $var

/dir1

它提取出了目录dir2所在的目录dir1.

 

Linux/Unix | 评论(0) | 引用(0) | 阅读(507)
第一页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式： 摘要 | 列表 ]